Lists that fill themselves

You do not build a card per product. You build one card, and a list element repeats it for every product its source returns.

These elements live in the Store panel on the rail.

Two kinds of list

Product list — repeats a card per product.

Collection list — repeats a card per collection.

Both work the same way: inside sits one card template, you design it, and the storefront repeats it.

Designing the card template

Drag elements into the template as usual. The ones that know how to pull the current row's data include Product media, the title, Pricing, an add-to-cart button, and the collection equivalents (Collection title, Collection description, Collection media).

When an element sits inside the template, its Source field is locked and says why:

"Inside a repeating item, so it follows that item's product."

That is what you want. Outside a repeater, the same element lets you pick Automatic (follow the page's context) or Custom (pin one specific product).

What the list shows

Drop a Product list and it shows all products by default. To narrow it, click the collection picker — the on-canvas hint says: "Click here to choose which collections this list shows."

Pick one or several collections. Products in any selected collection appear, and child collections count too — picking a parent category takes in the branch beneath it.

If the store has no collections yet, the panel says so plainly: "No collections to show — Create collections in your store and they will show up here."

Paging

A list can page with numbered pages, or with a Load more button.

The pager has its own styling — alignment, corner radius, background, text colour, cell size, and the gap above it.

On the canvas, when there is not enough data to page, the editor says so rather than showing an empty pager: "Not enough to page — {n} items, {size} per page." That is about the canvas, not the real storefront: live, the number is your whole catalogue.

The empty state

A list can come back with nothing — a filter too narrow, an empty collection, or a shopper searching for something you do not sell.

You can design that state rather than leaving white space. Turn on Previewing the empty state on the canvas to see and edit it: a sentence, an icon, a way back.

The editor also previews the loading state and the card template, so you can check all three without inventing fake data.

Storefront filters

The Storefront panel carries filter elements — checkboxes, radios and colour swatches — so shoppers can narrow a list themselves.

One thing worth knowing about how they work: filters navigate, rather than filtering in place with JavaScript. Pressing a filter loads a new address. Which means a filtered result has its own address — a shopper can bookmark it, share it, and a search engine can read it. That is a deliberate trade against instant filtering.

Trying it

On the canvas you see the shape and some real data. Paging, filtering and the full repeat run on the published page — use Preview to walk all of it without publishing.

Articles

The same machinery applies to the blog: there are list elements for Articles and Blog categories. See Writing articles.