The Repeat On is a powerful and flexible tool that allows users to create and manage repeating sets of fields or content elements. This is useful if, for example, you want to show a collection of products without manually creating a product card for each individual product.
Utilizing a repeater is ideal for showing products that are part of a chosen collection, showing related products, complementary products, or product images that are tied to a product.
In-depth
The main idea behind the Repeat On function is to provide a flexible and scalable way to manage multiple instances of a similar type of content without manually duplicating and managing each instance. Instead, users can define a template for a single item and then create as many items as needed, each adhering to this template.
Elements that can be repeated
Products as part of collections
Related products
Complementary products
Product images
Requirements
Your Instant project has to be connected to your Shopify store
Products & collections need to have been created & published within your Shopify store
How to use a Repeat on
A repeater can be created based on a collection or a product. For example, you could make a product grid that fetches products that are part of a specific collection.
Insert a column element from elements and place it within your layout.
Connect the inserted column to a collection by selecting the column, click on the + icon next to Shopify content.
Select the Collection that contains the products you wish to present within your page or section.
Select the product card element from elements or create your own and drag it into the column that you inserted before.
Proceed by clicking on the + icon next to Repeat on. Utilize the Limit field to control the amount of items the builder will load into your layout. In a normal column container, a value such as 4 would work well but you also could repeat products within a Slider element and then repeat the slides with products up to 20 times to create a dynamic product slider.
How to manually connect repeating data
Select the image within the product card, click on Dynamic and select Featured image.
Select the product title layer within the product card, click on the database icon next to content, and select Title
To finalize the product repeater, select the Price layer, click on the database icon next to content, and select Price.
To learn more about which data is supported as a dynamic source, check out our article on Shopify content.