Product Row

A heading with body copy on the left, a text link on the right, and a row of product cards underneath. On mobile the cards scroll sideways with the next one peeking into view; from 1024px up they spread across the row.

The cards come from one of two places, and this is the main decision you make when setting the section up: either you pick each product by hand as a block, or you point the section at a collection and it fills itself.

Used on the style guide page.

Settings

Setting	What it does
Link label	The text link on the right of the heading. Default “Shop all formulas”. Leave blank to hide the link.
Link	Where that link goes.
Button behavior	What each card’s button does — Quick Add opens the add-to-cart picker, See Details goes to the product page. Default Quick Add. Applies in both source modes.
Source	Selected products (default) uses the cards you add as blocks. Collection pulls products from a collection automatically.
Collection	The collection to pull from. Only used when Source is Collection.
Products to show	How many products to pull. 2–12, default 4. Only appears when Source is Collection.
Button label	The button text on every card. Default “Quick Add”. Only appears when Source is Collection.
Show price	On by default. Only appears when Source is Collection.
Price prefix	Text before the price, e.g. “Starting at”. Only appears when Source is Collection and Show price is on.
Price suffix	Text after the price, e.g. “per month”. Only appears when Source is Collection and Show price is on.
Show scrollbar	Off by default. The design hides the scrollbar; turn this on to show a visible one as a hint that the row scrolls.
Top / bottom padding (desktop)	0–12 rem, default 7 rem each.
Top / bottom padding (mobile)	0–12 rem, default 3 rem each.
Section ID	Optional anchor, so you can link to this section with #your-id.

Half the settings disappear in Selected products mode

Button label, Show price, Price prefix, Price suffix and Products to show are all Collection-mode settings and vanish when Source is Selected products. That isn’t a bug — in Selected products mode each card carries its own versions of those settings, so you set them per card on the block instead.

Button behavior is the exception: it’s a section setting and applies in both modes.

Blocks

The section accepts one block type:

• Product Row Card — one hand-picked product, with its own badge, button label, price prefix and suffix, title and description overrides, image and footnote.

These blocks are ignored entirely when Source is set to Collection. They aren’t deleted — switch Source back to Selected products and they reappear exactly as you left them.

The heading and the body copy above the row are two more fixed blocks that are always present and can’t be removed:

• Title — the heading.
• Rich text — the copy under it.

The link on the right is not a block — it’s the Link label and Link section settings.

Choosing a source

Selected products is the right choice when the row is merchandised — a specific set of products in a deliberate order, each with its own badge or wording. Every card can differ.

Collection is the right choice when the row should stay current on its own. Add a product to the collection and it appears here; every card gets identical treatment from the section settings. There are no per-card overrides in this mode by design.

Collection mode falls back silently

If Source is Collection but no collection is picked, the section falls back to rendering the blocks instead. So a row that looks like it’s ignoring your collection setting is usually one where the Collection field is still empty.

Tips

• Cards scroll on mobile — they don’t stack. That’s deliberate. Don’t add eight cards expecting a neat mobile grid; you’ll get a very long swipe. Four to six is comfortable.
• Turn on Show scrollbar if people aren’t finding the extra cards. The peeking next card is normally enough of a signal, but a visible bar helps on rows that only just overflow.
• Blank the Link label rather than looking for a toggle. There isn’t one — empty text hides the link.
• Price prefix and suffix are collection-mode only. To get “Starting at $X per month” on hand-picked cards, set those on each Product Row Card block.
• Switch Source freely. Neither the blocks nor the collection setting is destroyed by flipping between modes, so you can build both and choose.