Steps

A horizontal row of step cards — each with a square image or video, an optional pill label, a title, and a description. On mobile the steps scroll horizontally with snap points; on tablet and up they sit in an equal-column grid. The grid auto-sizes to match the number of metaobject steps (e.g. three steps = three columns).

Content comes from a product_feature_section metaobject (tag, heading, description, and a list of steps with media) or from manual Step theme blocks when no metaobject is connected. The metaobject always wins when present.

Settings

Setting	What it does
Section ID	Optional anchor for jump links. Must be unique on the page, in handle format.
Feature section	A product_feature_section metaobject. Connect via dynamic source on PDP to pull per-product steps. Leave empty to fall back to Step blocks.
Video mode	How metaobject videos play: Autoplay (muted, looping) or Player (with controls). Does not affect Step block videos, which always autoplay.
Padding top / bottom	Default 48/64/80px each.

Blocks

Static blocks (render when metaobject overrides are present):

• Tag — pill label above the heading. Overridden by the metaobject’s tag field when a feature section is connected.
• Title — the section heading. Overridden by the metaobject’s heading field.
• Rich text — description below the heading. Overridden by the metaobject’s description field.

Repeatable:

• Step — image or video, pill label, title, and description. Each block is one column. Only renders when no metaobject steps are present.

Step blocks are silently ignored once a metaobject is connected

When the feature section metaobject contains steps, all Step theme blocks stop rendering. The blocks remain in the sidebar but don’t appear on the page. If your edits aren’t showing, check whether the Feature section picker is filled in.

Auto-hide on PDP

On product pages, the section hides entirely when no metaobject is connected via dynamic source. On other page types it always renders, falling back to theme blocks. This means you can add Steps to the product template once and it only appears for products that have a product_feature_section assigned.

Where it’s used

• Product templates (all three: default, parts, mid-tier)
• Any content page where you want a manual step-by-step breakdown

Tips

• Three steps is the sweet spot. The grid works with any count, but three keeps each card wide enough to read without scrolling on desktop.
• Use short videos over static images. An autoplay loop of someone using the product makes a better step than a flat photo.
• Write labels as ordinals — “step one”, “step two” — to reinforce the sequence. They render as lowercase pills on the image.
• Keep descriptions to two sentences. The column is narrow; long paragraphs wrap into a wall of text.