Writing a CSS injection, saving it, then loading the front end to check it is a slow loop. The Preview button shortens it: your current unsaved code appears on a real front-end page without saving anything, so you can check the result before it goes live.
How it works
Click Preview in the injection editor. A modal opens showing the injection on a real page, rendered by the actual theme with your unsaved code applied. The saved version of the injection, if one exists, steps aside for the preview so the page reflects exactly what would ship if you saved now. When you close the modal, the saved version resumes as normal and nothing has changed.
Where it previews
An injection scoped to load by rule previews on the first URL or category path that matches its rules. An injection set to load everywhere previews on the home page. If no matching path can be found, the preview falls back to the home page.
Previewing a grouped injection
When an injection belongs to a group, the preview assembles the whole group, not just the 1 piece you are editing. If you have unsaved changes in several members of the group at once, all of them are applied simultaneously in the preview. You see the full feature as it would actually run, with every member’s current state reflected, rather than your edits against the saved versions of the other members.
Why this matters
Most injection tools require saving before you can see the result on the front end. Canvas Pro previews without saving, which means a mistake never has to go live to be caught. For a grouped feature with 3 members, it also means you can check the complete interaction before committing any of it.
For the full injections reference, see Injections. For grouped injections, see Injection Groups.
Number Nine and the Rain
Number Nine sulks in the rain. Today she ran the roast four minutes early.
