Content types
Every kind of content an injectable can hold, with its fields, and the Design card that styles it.
The Content type picker in the Content card offers these types. Each has its own editor.
| Type | In one line |
|---|---|
| HTML | Markup you write, inserted as is. |
| Script | JavaScript that runs on the storefront. |
| Template | HTML with {{ }} placeholders filled per visitor. |
| Countdown | A live timer counting down to a date. |
| Custom HTML & CSS | A styled block whose CSS cannot leak into the page, plus optional page-wide CSS. |
| Design preset | A ready-made block from a gallery; you fill in its settings. |
| Mega menu | A storefront navigation menu built from your categories. |
| Blocks | A stack of your saved blocks with their values filled in here. |
| Visual builder | A section built by dragging parts into place. Shown only when the builder is turned on for your store. |
A product kit ("Complete the look") is authored in its own place, not in this picker.
HTML
One field, HTML markup. Up to 100,000 characters.
Script
One field, Script source, up to 50,000 characters, under a red warning that you should read every time. The script runs on the storefront with full access to the page: it can read cookies and anything the visitor types, including checkout and payment details, send it anywhere, and change the page. It is not timed out, so a slow or endless loop can freeze the visitor's browser tab. Only publish script you have reviewed and fully trust. Publishing a script always asks for a typed confirmation; see Publishing and status.
Template
A Template body of HTML with placeholders, an Insert variable menu that drops a placeholder at the cursor, a list of your own fixed variables, and hints about anything that looks wrong. Up to 100,000 characters.
Placeholders you can insert
| Menu label | Placeholder | What it becomes |
|---|---|---|
| Page type | page.type | home, category, product, cart, search or other |
| Product ID | product.id | The product on a product page |
| Product title | product.title | |
| Product price | product.price | |
| Category IDs | category.ids | The categories of the page or product |
| Category names | category.names | |
| Category count | category.count | |
| Cart total | cart.total | |
| Cart currency | cart.currency | |
| Cart item count | cart.itemCount | |
| Visitor type | visitor.type | new, returning or logged in |
| Country code | geo.country | |
| Country name | geo.countryName | |
| Region | geo.region | |
| Timezone | geo.timezone | |
| Currency | currency | The store currency |
You can do sums inside a placeholder, for example {{ product.price + 5 }}.
Fixed variables are name and value pairs you define once and reuse on every render, up to 50 of them, each value up to 2,048 characters.
Countdown
Two ways to author it, chosen with a toggle.
Guided settings starts from a preset gallery and then offers:
- Counts down to: the injectable's own schedule end, or a specific date and time in the store's timezone.
- Countdown style: classic, or a flip, stat-cards or rings look.
- Digit format: days, hours, minutes and seconds; hours, minutes and seconds; minutes and seconds; or automatic.
- Prefix and Suffix text, which may use placeholders.
- A plain Title above and Description below.
- When it reaches zero: hide the injectable, or show a message you type.
Custom template keeps the same target and expiry fields around a template editor with starter templates.
In the preview a countdown is a frozen sample; it ticks only on the storefront.
Custom HTML & CSS
Tabs for HTML, CSS and, where the delivery route allows it, External CSS.
- The HTML tab works like the Template editor, with the Insert variable menu and fixed variables.
- The CSS tab is scoped to this block: its rules cannot affect the rest of the storefront page. Placeholders work in the HTML tab, not in CSS.
- The External CSS tab applies to the whole storefront page. It can restyle any element, including your theme's header, footer or checkout. Comments,
@importand@charsetare removed and broken rules are dropped. The preview holds only this block, so page-wide changes show only on the storefront once saved.
HTML up to 100,000 characters; each CSS body up to 50,000.
Design preset
Pick a preset from the gallery and fill in its settings. The presets are: Announcement bar, Promo banner, Email capture card, Urgency card, Free shipping bar, Geo announcement, Welcome back banner, Trust badges, Sale banner, Value props and Savings callout. Each exposes its own fields, for example a Promo banner has a headline, body, button label and link, background and accent colours, alignment and corner radius.
Mega menu
A two-pane builder. On the left, the top-level items: select, reorder, add and remove them. On the right, the item you selected:
- Label (optional) and Item link (optional), a category or page picker with Clear link for a heading that links nowhere.
- Submenu panel: turn it on to give the item a dropdown. A submenu is a column layout of blocks you add with Add block: link groups, images, image groups and saved content blocks. There is a cap on blocks per submenu.
- Per-item country visibility. Either Geo-target this item by country, which shows the item only in, or hides it in, a list of countries and optional regions, or Replace this item per country, which swaps in a different label and link for each country group. An item uses one of the two, not both.
At the menu level, Emit unstyled HTML skips the built-in styling so your theme styles the menu.
Blocks
Build the injectable from your saved blocks and set their values here, or from wrapper HTML alone. The editor has, top to bottom: the stack of blocks, a Wrapper HTML & CSS section that lays the blocks out, a Template variables section for your own {{name}} values, and an External CSS section for page-wide CSS. See Using blocks in injectables. A stack of blocks is only allowed at the top level of an injectable, not inside a single block or inside an A/B variant.
Visual builder
A drag-and-drop editor for a section. See The visual builder. When the builder is not turned on, the picker does not offer this type and the page says so.
Design
The Design card has one choice, Where the styling comes from:
- Use the store design: the colours, spacing and type set on the Design page.
- No styling (plain defaults).
- Customise for just this one: brand, accent, background and text colours, corner roundness and spacing presets, plus Advanced (every colour and style) for everything else.
Some content cannot take the store design, and the card shows a note instead of the choice. An injectable that renders a block is one such case: whether the store design applies is decided by the block's content kind, not here.