Injections

The free theme gives you 2 global code boxes, one for the head and one before the closing body tag. That is enough for a tag or a small script. It stops being enough when you have a block of CSS for one section, a script that should run only on the pricing page, and a third thing you want to turn off for a week without deleting it. Injections are Pro’s answer: named blocks of code, each its own item, each loading where you say.

What an injection is

An injection is a saved block of code with a type, a place it loads, and an on or off switch. The 4 types are CSS, JavaScript, HTML in the head, and HTML before the body end. You write it in the same editor as everything else in Canvas, with coloring for the type, the find and replace bar, and error checking on the HTML types. CSS and head HTML print in the document head. JavaScript and body HTML print just before the closing body tag. Injected CSS is placed so it can override the theme’s own styles, which is usually what you want.

Where it loads

By default an injection loads on every page. Switch it to load by rule instead, and it runs only where its rules match, by URL pattern or by category slug. It is the same matching the header and footer sets use, so if you have set those up, this will feel familiar. An injection that is published but set to load by rule with no rules set would load nowhere, so the editor warns you rather than saving something that quietly does nothing.

Published, draft, and the enabled column

Each injection carries a Published or Draft status and an on or off toggle. The list shows an Enabled column that tells the truth: it reads draft, or scheduled, or expired, so you can see at a glance which injections are actually live. The list also shows each injection’s ID, and the toolbar has an ID lookup, so you type an ID and jump straight to that injection. That matters once you have more than a handful.

Scheduling

An injection can carry a start and an end. Set a start and it turns itself on then. Set an end and it turns itself off then. A launch banner, a seasonal style, a script that should only run during a sale: schedule it once and you do not have to come back and remember to toggle it. The save button reads Schedule when the start is in the future, so it is clear you are scheduling rather than publishing now.

Previewing before you save

The Preview button opens the injection on a real front-end page with your current unsaved code applied, in a modal, without saving. When you preview an injection that already exists, the preview stands in for the saved version, so the page reads as it would once saved. A rule-scoped injection previews on the first matching path. Everything else previews on the home page.

Bulk actions, history, and export

Select several injections and enable or disable them in one action. Every injection has full version history like the rest of Pro, so a change is never lost and a restore is never destructive. Injections travel with the configuration export and import too, so a whole set of them moves between sites in one file.

Injection groups

A popup, a cookie banner, a sticky header: these are rarely 1 injection. They are typically an HTML block, a CSS block, and a script that only work as a set. Groups tie those pieces together as one feature. Members share one set of load rules and enable or disable together, so turning a feature on or off is one action rather than 3. The conflict detector does not flag members against each other, since they are designed to coexist. Load order within a group is explicit and editable, so the CSS always lands before the script that depends on it. For more, see Injection Groups.

When 2 injections collide

Many small blocks of code on the same page can step on each other. Pro watches for that. See Conflict detection for how it catches 2 injections that set the same id, define the same animation, or pin to the same corner, and The injection error log for how it surfaces a script that throws once it is live.