Blocks

A storefront page is a list of rows, and each cell in a row holds one block.

There are ten block types, each a self-contained widget that renders itself and carries no layout of its own — the rows decide width and order.

Blocks and layouts are database records, so a page is rearranged in the admin and no deploy is involved.

Splitting the widget from the layout is what makes the same block reusable. A banner does not know how wide it is, so it can sit in a full-width row on one page and in a third of a row on another.

Where it lives

Content → Blocks
Content → Blocks → Page layout

The first screen creates and edits blocks. The second arranges them into a page.

Blocks have no lifecycle

A new block is not live anywhere.

Placing it in a page layout is what makes it render, and the block list marks each one In use or Unused.

There is no publish state on a block itself. A block you are still working on is simply not in a layout yet.

The ten types

• Banner — text, an image, and a link. The one promo widget; the template sizes it.
• Slider — a slideshow of the images you attach to it.
• Products — a grid of products pulled from a collection you pick.
• Product Feed — an infinite, self-updating product stream from one of your feeds. This is the dynamic-page primitive, and it can be placed anywhere in the rows.
• Categories — a grid of your top-level categories, each with its icon, resolved live.
• Collections — a grid of your published collections with cover art, resolved live, so new collections appear automatically.
• Badges — a row of authored claims, such as Free Shipping or Handmade, each with a style, an icon and an optional link.
• Quick Nav — a row of quick-navigation links, a label and an address per item.
• Text & Photos — the simplest block. Text and photos, in order. Nothing else.
• Filter — a composed facet sidebar (Category, Color, Size, Price…) that filters the feed.

Appearance settings

Each block can carry:

• Alignment
• Whether the block's name renders as a section heading
• Grid columns — 2, 3, or 4
• Image shape — square, wide, or banner

Each type exposes only the settings that apply to it. A slider has none.

Images belong to two types

Only the banner and the slider take images.

• A banner uses the first image
• A slider uses all of them

The images come from the media library and are attached to the block, so the same photo can be used elsewhere without a second upload.

Rows

Rows are ordered, and each row holds 1–3 cells.

A row also carries:

• An optional minimum height
• A contained or full-width setting

Save is a draft, Publish goes live

Save writes to the page's draft layout, which the storefront never reads.

Publish promotes the draft into the live layout and clears the storefront's block cache, so the change appears.

That is the safety in the editor: you can rearrange a live page as much as you like and nobody sees it until you publish.

The same block on several pages

A cell holds a block's id.

One block can therefore sit in the layouts of the homepage, a landing page, and a category page at once. Editing it changes all of them.

Building a page

1. In Content → Blocks, pick a type from Add section. The block is created immediately, named after its type, and opened in its editor.
2. Fill in its fields — the images for a banner or slider, the collection for a products grid, the feed for a product feed, the facets for a filter, the links for a quick nav. A preview at the top shows the block as the storefront renders it.
3. Open Page layout, drop the block into a cell, and Save. The page keeps that as a draft until you Publish it.

Choosing a block

Pick Products when you want a fixed grid drawn from one collection you chose. Pick Product Feed when you want a stream that keeps going and keeps itself up to date — that is what turns a page into an endless product page.

Pick Collections or Categories when you want the grid to follow your catalogue on its own. Both resolve live, so you are not maintaining a list by hand.

Pick Banner for one promotional message and Slider when you have several images to rotate. They are the only two types that take images.

Reuse a block across pages when the content really is the same thing in two places, and copy it into a second block when the two will drift apart. One block edited once changes every layout it sits in.

The question before you add a block is:

Should this content follow the catalogue on its own, or am I authoring exactly what it says?

Related