Skip to content

Product rail

Pull a collection into a single horizontal row of product plates. Up to four products it is a tidy grid; past four it becomes a side-scrolling rail with the side note turning into a link to the full collection.

It is the workhorse product section: “the rest of the drop” under the mosaic, a capsule on a page, last season’s carryover at the bottom of the homepage.

SettingTypeDefaultWhat it does
Fallback collectionCollection—Which collection to pull from. With nothing set, six placeholder cards render so the layout is visible in the editor.
HeadingTextThe rest of the dropSection heading. Falls back to the collection’s own title if you clear it.
Side noteTextScroll →Side note on the right. See below — it only appears when the row actually scrolls.
Max productsRange, 4–16, step 18How many products to pull.
Colour schemeSelect — Default / Light / DeepdefaultWhich ground the section sits on.
Top spacingRange, 0–160 px48Top spacing.
Bottom spacingRange, 0–160 px48Bottom spacing.

No blocks. One preset, Product rail.

The section counts how many products it is actually going to show (the collection’s size, capped at limit) and picks a layout:

Products shownLayoutSide note
1–4A fixed grid, one column per productHidden, even if you typed one
5 or moreA horizontally scrolling railShown, and linked to the collection

That is why the default side note reads “Scroll →” — it only ever appears when there is something to scroll. And because it links to the collection automatically, you do not set a URL.

On the grid, columns step down to three below 1100 px and two below 760 px. The rail scrolls at every width.

The cards are the theme’s product plate, the same one the Product mosaic uses, at a 1 : 1.18 portrait ratio:

  • Featured image, cropped to fill.
  • An automatic Sold out or On sale corner flag where it applies.
  • On hover, Add + for single-variant products or Choose + for anything with options.
  • A Peek quick-view button when the theme’s Quick view setting is on.
  • A caption reading Product name – price, with the compare-at price struck through.