Search

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 a 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, with examples:

Product feed: A common approach is to use 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 to control how many items are shown. Using "From 1 to 1" you can display the first product prominently as a hero image, then show the rest using "From 2 to 4" or however many you want to show.

Multi-channel promotions: Some data becomes available simply by adding the data source, but a repeater is needed to access and display individual object data (such as name and image URL). The placement of the repeater in the hierarchy depends on which element is to be repeated.

Vouchers: Similar to promotions, where a hierarchy is used in the layout.

Setting up a repeater in your module structure is a non-trivial process. It's highly recommended to use the provided starter modules and work from them. See here for more on starter modules. However, the process of manually building a structure using a repeater is covered further down, for those who prefer to do it that way.

Product feed module using repeaters

A common use case for repeaters is a product feed.

Here you can see how to do that using one of the starter modules.

When the email is sent, the repeater will show one product feed row element per SKU, automatically populated with the correct image, name, and price. If you enter three SKUs, you get three elements. If you enter six, you get six. You only need to build the layout once.

Design Studio canvas showing a product feed starter module with a single product card layout in the Overview panel

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

Design Studio settings panel showing two SKUs entered in the Products field

Then select Preview with data to show the data:

Design Studio canvas showing a preview of the product feed module with two product cards populated with real data

This confirms that everything has been set up correctly.

Things to keep in mind

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

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

When working with data sources other than the product feed, the number of items in a sendout will likely vary per contact (for example, each customer has a different number of abandoned cart products). For cases where no items are available at all in the configured data source, consider hiding the layout or providing fallback content.

SKUs (product reference IDs) must be added on the wrapper or row where the data source is configured, otherwise the repeater won't know what data to use and the module will be hidden.

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

Repeating columns

When repeating columns, it's recommended 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 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% with four products:

Email canvas preview showing four product cards arranged in a two-column layout using 50% column width

When repeating rows and other elements such as text elements that are stacked on each other, use padding to create space between the elements.

Settings and limits

The repeater can be limited to only repeat part of a list. Use the From and To settings 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) — shows all items except the first
  • From: 1, To: 1 — shows only the first item
  • From: 2, To: 3 — shows items two and three
  • From: 1, To: last item (leave field empty) — shows all items

Repeater settings panel showing the From and To fields for limiting which items are repeated

The number of repeated items will always be based on the data. If the data contains three items and the repeater is set to From: 1, To: 4, only three items will be displayed.

Scenarios where these settings are useful:

  • When you have a three-column layout
  • When you only want to show the first item in a layout
  • When you want to split the list of items into different parts of the layout
  • When the data source includes 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's 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've added at least one product reference to the module. Without these, there's 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've 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 include other items. The order action data source is one 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"

Product feed repeater module

Here is how to manually build a layout to work with a product feed using a repeater:

  1. Inside a row or wrapper, 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 row or wrapper containing your column.
  4. Place the repeater on the column element itself, not on the individual elements inside it, since the whole column is what 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.

Was this article helpful?

/