When a data source contains a list of items (such as multiple products), you can use a repeater on elements to dynamically duplicate a layout element for each item in the data (or, in the case of Product Feed, the items you have selected to be shown).
Example setup:
Row – Data source: "Product Feed"
Column – Repeater: "Products"
Image – Image URL (data parameter)
Text – Title (data parameter)
Even if your design only has one column, that will be repeated when previewing with data. For example, if the data contains two product items, the above setup would become a two column layout.
Keep in mind that the numbers of items per contact can and probably will vary (for example, a different number of abandoned cart products). If no items are available in the data source you picked, consider hiding the layout or providing fallback content.
Repeating columns
When repeating columns, it is recommend to use a maximum of three per row to maintain layout integrity.
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:
Repeating rows and other stacked elements
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
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
Repeaters within other repeaters
In some cases, data source can have items that includes other items. The order action data source is such an example where 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"
Article last reviewed
Comments
0 comments
Please sign in to leave a comment.