How the theme composes: sections, blocks, and boxes

Zalify Theme pages are built from sections; sections are filled with small, reusable blocks you can add, reorder, and nest in the theme editor.

Every page in Zalify Theme is assembled in the Shopify theme editor from two kinds of pieces:

Sections are the full-width building rows of a page — Hero, Stories, Featured collection, Image with text, Footer. You add them from Add section and drag them to reorder.
Blocks are the small content pieces inside a section — a line of text, a button, an image, a spacer. You add them from Add block inside a section, and drag to reorder them the same way.

The theme keeps blocks deliberately small and reusable. Instead of every section growing its own "Heading", "Subheading", and "Button label" settings, most sections accept the same shared library of content blocks. Once you know the eight content blocks, you know how to fill any section.

The mental model

Think of it as three layers:

The section owns the canvas — its background, height, color scheme, and spacing.
Layout blocks own placement — a Content box positions a cluster on the hero canvas; a Group arranges blocks in a row or column; a Spacer pushes things apart.
Content blocks own the content — Text, Button, Image, Quote, Accordion.

So "a hero with a headline and a button on the right" is: Hero section → Slide → Content box (position: right) → Text block + Button block. Nothing is hard-coded; every piece can be swapped, restyled, reordered, or deleted.

Where blocks can be nested

Blocks can contain other blocks. The current nesting points:

Parent	Accepts
Hero section	Slides
Slide	Content boxes
Content box	Any content block
Group	Any content block
Image with text, Rich text, Multicolumn, Custom section	Any content block
Product section	Description, Accordion, Size guide, app blocks

Two conventions used everywhere

Color schemes. Almost every section has a Color scheme setting. Schemes (background, text, accent, button colors) are defined once in Theme settings and reused, so the whole store re-themes from one place.
Section spacing. Sections expose a Section spacing setting (None / Small / Medium / Large) controlling the vertical room around them — consistent rhythm without per-section pixel values.

Blocks only appear in the Add block picker where they make sense: slides only inside the Hero, content boxes only inside a slide, product blocks only on the product page.

Content blocks reference — every shared block and its settings
Sections reference — every section, one page each
Hero section: slides and content boxes
Product section and product page blocks
Theme settings reference

Content blocks reference

How the theme composes: sections, blocks, and boxes

Where blocks can be nested

Two conventions used everywhere

Next