Using repeaters in Design Studio

When a data source contains a list of items (such as multiple products), a repeater can be used to create a copy of a layout element for each item in the data source. Or, in the case of product feed, a copy for each of the items (based on their unique ID) that you specify in the Products field.

When to use repeaters

Here are some common situations where a repeater can be used:

Product feed: A common approach here is a repeater on a column to duplicate product cards. Product IDs / SKUs and personalized fields are required to show the incoming data.

Abandoned cart: Use the "From/To" feature for a limited number of items. Using "From 1 to 1" you could display the first product more prominently as a hero image, then show the rest using "From 2 To 4" or however many you want to show

Multi-channel promotions: Here it's important that the repeater is placed one level deeper to reach a promotion object's details (such as Name, Image URL).

Vouchers: This is a similar situation as promotions, where a hierarchy is used in the layout.

Example for product feed

Here is how to configure your layout to work with a product feed using a repeater:

1. Create a column that represents one product in your layout
2. Inside that column, add the elements you need (for example an image placeholder, a text field for the product name, and a text field for the price)
3. Choose "Product Feed" as the Data source for the column element.
4. Next, place the repeater on the column element itself and not on the individual elements inside it. Since the whole column is the element that will be duplicated.
5. Select personalized fields for each element: map the image placeholder to the product image field, the title text to the product name field, and the price text to the price field.
6. Add SKUs to the module to tell the repeater which products to display.

Here we are using a standard product feed module that's already set up:

To see how the layout looks with actual data, let's specify the IDs / SKUs of two specific items from the product feed in the Products field:

And then press the Preview with data button to show the data:

This confirms that everything has been set up correctly.

To keep in mind

Here are some important things to keep in mind about repeaters using a product feed:

The repeater controls what gets duplicated, meaning it is the element (column or row) carrying the repeater, and everything inside it, that is repeated per product/object. Do not add extra columns manually.

SKUs (product reference IDs) must be added in the element with the repeater otherwise the repeater will not know what data to use and the module will be hidden.

Personalized fields must be used in the element being repeated, otherwise product-specific info (image, title, price, and so on) will not be shown for every item.

Repeating columns

When repeating columns, it is recommend to use a maximum of three per row. If your data contains more items you can control the number of columns per row by adjusting the column Custom size setting:

• 50% width: Two columns
• 33.3336% width: Three columns
• 25% width: Four columns

A new row is automatically created if the total width exceeds 100%.

This example shows a custom size of 50% and four products:

Settings and limits

The repeater can be limited to only repeat part of the list. Use the settings From and To to decide which items to repeat. By default, a repeater will repeat all items present. Example setups:

• From: 2 To: "Last item" (leave field empty) will show all items except the first one
• From: 1 To: 1 will only show the first item
• From: 2 To: 3 will show item 2 and 3 in the list of items
• From: 1 To: "Last item" (leave field empty) will show all items

Scenarios where these settings are useful:

• When you have a 3 column layout
• When you only want to show the first item in a layout
• When you want to separate the list of items into different parts of the layout
• When the data source include more items than you want to show

Common issues

Here are a few common situations that users of repeaters might run into:

"I added extra columns manually, and now I see double products"

Remove the extra columns. The repeater duplicates the element it is placed on; you only need one column. Trust the repeater to create duplicates for each product.

"My product feed module doesn't show anything when the email is sent"

Check that you have added at least one product reference to the module. Without these, there is no data, and the module is hidden automatically.

Also verify that personalized fields are selected – without them, the content has nothing to display.

It could also be that one or more products are missing from your product feed.

"The product images and names are missing, but the layout shows up"

You have likely placed a repeater and added product references, but forgot to set up personalized fields. Go back to the module and map each element (image, title, price) to the corresponding field from the data source.

"I connected a promotion data source, but I can only see the number of promotions"

You need a repeater to access the promotion's details (name, image URL, description). Add it to the element where you want the details displayed. Remember to include personalized fields.

"I don't know which fields are mapped in the product feed"

Feed mapping can be unclear. Check with your team or Voyado AM to confirm which fields are available and what item_id vs. item_group_id means in your specific setup.

Repeaters in repeaters

In some cases, a data source can have items that includes other items. The order action data source is such an example. Here, you'll need to place a repeater inside the structure of another repeater.

• Wrapper – Data source: "Order action"

  • Row – Repeater: "Order line items"

    • Column

      • Text – Repeater: "Discount items"