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 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 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: In this case, some data becomes available simply by adding the data source, but a repeater is needed to access and display the individual object data (such as Name, Image URL). The actual placement of the repeater in the hierarchy depends on which element is to be repeated.

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

Since setting up a repeater in your module structure is a non-trivial process, it is highly recommended to use the starter modules provided and work from them. See here for more on starter modules. However, the process of building a structure using a repeater is also covered further down, for the case of a product feed module, for those users who anyway want 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 inputted three SKUs, you will get three. If you used six, you get get six of that element. So you only need to build the layout once.

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 further things to keep in mind about repeaters when 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.

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

SKUs (product reference IDs) must be added on the wrapper or row where the data source is configured, 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:

Example showing four products

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

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

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

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"

Product feed repeater module

Here is how to manually build your 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 Data source for the row/wrapper containing your 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.

Was this article helpful?

/