Skip to main content

Repeat elements over data

Use Repeat on to render a layer once per product, media item, cart line, and more.

The Repeat element control renders a container's contents once for every item in a Shopify list — the foundation for product grids, image galleries, and cart line items. You design one "tile" and Instant clones it for each item.

Add a repeater

  1. Select a container that sits inside connected Shopify content (or a cart layout).

  2. Open the Repeat element section in the Design panel.

  3. Click +, then choose an option under Repeat on.

If the section shows no options, the element isn't in a context that can repeat — nest it inside a connected container first. To remove a repeater, click the control on the section header.

Repeat on options

The list depends on the connected context:

  • Collection products — products in the connected collection

  • Product images / Product media — the connected product's gallery

  • Related products / Complementary products — Shopify recommendations

  • Cart items / Cart discounts — the cart's lines and discounts (cart layouts)

  • Filter options — values of a collection filter

  • Payment methods — the store's payment icons

Related, complementary, and payment-method items shown on the canvas are illustrative; the real items appear on your storefront once published.

Limit and offset

Most repeat types expose a Limit (how many items to render) and an Offset (how many to skip from the start):

  • Collection products allow up to 50 items and default to 5.

  • Related and Complementary products allow up to 10 and default to 10.

  • Other list types default to 10 with no hard cap.

Use offset to skip items already featured elsewhere on the page. Cart items, filter options, and a few list types render every item and don't expose these controls.

Design the repeated item

Everything inside the repeating container renders once per item. Build a single tile — image, title, price, button — and bind its Content and images to sources relative to the repeater, not the page root. To keep a tile reusable, convert it to a component and place an instance inside the repeater.

Related articles

Did this answer your question?