Content blocks reference
Every shared content block in Zalify Theme — Text, Button, Image, Quote, Accordion, Group, Spacer, and Custom Liquid — with all settings explained.
These blocks form the shared content library. Any section that accepts theme blocks — Hero content boxes, Image with text, Rich text, Multicolumn, Custom section, Group — offers all of them in its Add block picker.
Text
One piece of text with a chosen role. Use several Text blocks to build a heading + paragraph stack instead of one block with many fields.
| Setting | Options | Default | Notes |
|---|---|---|---|
| Text | free text | "Text" | The content itself |
| Text style | Display / Title / Subtitle / Normal text / Eyebrow | Title | See roles below |
| Alignment | left / center / right | left |
Text style roles:
- Display — large, light-weight hero headline (the style used on hero banners).
- Title — bold section heading.
- Subtitle — medium heading for sub-points.
- Normal text — body copy.
- Eyebrow — small uppercase label with letter-spacing, for kickers like "NEW IN" above a headline.
Button
A pill link button.
| Setting | Options | Default | Notes |
|---|---|---|---|
| Label | free text | "Shop now" | |
| Link | URL picker | — | Without a link the button renders disabled |
| Button style | Primary / Secondary | Primary | Secondary is outlined/transparent |
| Size | Small / Medium / Large | Medium | Small tightens padding at 12px type; Large grows padding at 16px type |
Image
| Setting | Options | Default | Notes |
|---|---|---|---|
| Image | image picker | — | |
| Aspect ratio | Auto / Square / Portrait / Landscape | Auto | Auto keeps the image's own ratio; the others crop to fit |
Quote
A customer quote with optional attribution.
| Setting | Options | Default |
|---|---|---|
| Quote | rich text | sample quote |
| Author | free text | — |
Accordion
A collapsible row (heading + expandable rich text). On the product page, consecutive Accordion blocks visually group into one framed list — see Product section and product page blocks.
| Setting | Options | Default |
|---|---|---|
| Heading | free text | "Details" |
| Content | rich text | sample text |
Group
A layout wrapper: put blocks inside it to arrange them in a row or a column. Typical use: two buttons side by side, or an icon + text pair.
| Setting | Options | Default | Notes |
|---|---|---|---|
| Layout direction | Horizontal / Vertical | Vertical | |
| Alignment | Left / Center / Right | Left | Vertical direction only |
| Padding | 0–200px | 0 | Applied on the cross axis |
Spacer
Empty space with a purpose. Two modes:
| Setting | Options | Default | Notes |
|---|---|---|---|
| Height | 0–160px | 40 | Fixed gap; acts as a minimum in fill mode |
| Fill available space | on / off | off | The spacer grows to consume free space, pushing the blocks around it apart |
Fill is the magazine-layout trick: in an Image with text column, Title → Spacer (fill) → Normal text pins the heading to the top and the copy to the bottom of the image's height. On mobile, where columns collapse to natural height, a fill spacer quietly shrinks to its minimum — no dead space.
Custom Liquid
An escape hatch for developers: renders whatever Liquid/HTML you paste. Use sparingly — anything built here is invisible to the editor's normal controls.
Custom Liquid runs unmodified in your storefront. Broken markup or heavy scripts here can affect the whole page.