Blocks overview
What a block is, the kinds of block you can make, and the Blocks list.
A block is a piece of content you build once and use in many injectables. Change the block, and every injectable that uses it changes too. That is the whole point: one banner design, one set of trust badges, one footer note, kept in one place.
A block holds the same kind of content an injectable can hold, plus, for two kinds, a list of variables that each injectable can fill in differently. See Variables.
The list
Open Storefront › Blocks. Press New block to create one. When the store has no blocks yet the page says No blocks yet. Create one to reuse the same content across injectables. Otherwise it shows a table:
| Column | What it shows |
|---|---|
| Name | Opens the block. |
| Kind | The block's content type. |
| Variables | How many variables the block declares. |
| Used by | How many injectables use it. |
| Status | active or archived. |
| Updated | When it was last saved. |
Kinds of block
| Kind | What it holds |
|---|---|
| HTML | Markup, inserted as is. |
| Script | JavaScript that runs on the storefront. |
| Template | HTML with {{ }} placeholders. |
| Countdown | A live timer. |
| HTML & CSS | Markup plus CSS that stays inside the block. Can declare variables. |
| Preset | A ready-made design with settings you fill in. |
| Visual builder | A section built by dragging parts, when the builder is turned on for your store. |
Three kinds an injectable can be are not available as blocks: a Mega menu, a Kit, and a Blocks stack. A block cannot itself be a stack of blocks; build a Blocks injectable from your blocks instead.
A block also cannot carry page-wide External CSS, because a block is embedded inside other content and must not restyle the page around it. See Content types for what External CSS does on an injectable.