Page CSS and JavaScript
Styling and behaviour for one page only, written so it still follows your design system.
CSS and JS in the toolbar open this page's own styling and behaviour in a proper code editor.
These are genuinely per-page. Nothing you write here affects any other page, which is both the point and the limitation.
Before You Begin
- Working knowledge of CSS, or of JavaScript for the JS editor
- A clear reason this belongs to one page rather than the whole site
Steps
Decide whether it belongs here at all
Ask whether any other page will ever need this. If the answer is yes, it belongs in Site Settings under injections, where it applies everywhere. If it is genuinely about this page alone, it belongs here.
The common mistake is fixing something here that is actually a design system problem. If a heading is the wrong size on this page, it is probably the wrong size everywhere, and the fix is in your design system.
Write against the site's design tokens
Your design system publishes its colours, fonts and spacing as named values the page can read. Use those names rather than writing a colour or a font directly.
This is not tidiness. A literal colour written here is frozen — change your palette later and this page keeps the old one, because a hard-coded value cannot follow a design system it does not reference.
Keep the JavaScript defensive
Page JavaScript runs on the published page. Anything it assumes is there should be checked for, because a script that throws can stop later scripts on the page from running.
Find your elements, confirm you found them, then act.
Save, and know it is recoverable
Saving takes a version snapshot of the page first, so a CSS or JavaScript change you regret can be undone like any other change.
That makes this a reasonable place to experiment, as long as you check the published page afterwards.
Check it where it matters
Preview at all three widths, and check the published page rather than only the editor. Page JavaScript in particular behaves differently once the page is served on its own.
Warning: Custom CSS loads after your design system, so it overrides it. That is what makes it work, and also what makes a broad rule here capable of fighting the rest of the page. Target narrowly.
Result
A page-specific adjustment, scoped to this page, recoverable, and written so it still follows your design system.
