Using product listings in a transactional message using-product-listings
When editing the content of a transactional email, you can create product listings referencing one or more data collections. For example, in a cart abandonment email, you can include a list of all products that were in the users’ carts when they left your website, with an image, the price, and a link to each product.
To add a list of abandoned products in a transactional message, follow the steps below.
You can also watch this set of videos explaining the steps that are required to configure product listings in a transactional email.
Defining a product listing defining-a-product-listing
Before being able to use a product listing in a transactional message, you need to define at the event level the list of products and the fields for each product of the list you want to display. For more on this, see Defining data collections.
-
In the transactional message, click the Content block to modify the email content.
-
Drag and drop a structure component to the workspace. For more on this, see Defining the email structure.
For example, select a one-column structure component and add a text component, an image component and a button component. For more on this, see Using content components.
-
Select the structure component you just created and click the Enable product listing icon from the contextual toolbar.
The structure component is highlighted with an orange frame and the Product listing settings are displayed in the left palette.
-
Select how the elements of the collection will be displayed:
- Row: horizontally, meaning each element on one row under the other.
- Column: vertically, meaning each element next to the other on the same row.
note note NOTE The Column option is only available when using a multicolumn structure component ( 2:2 column, 3:3 column and 4:4 column ). When editing the product listing, only fill in the first column: the other columns will not be taken into account. For more on selecting structure components, see Defining the email structure. -
Select the data collection you created when configuring the event related to the transactional message. You can find it under the Context > Real-time event > Event context node.
For more on configuring the event, see Defining data collections.
-
Use the First item drop-down list to select which element will start the list displayed in the email.
For example, if you select 2, the first item of the collection will not be displayed in the email. The product listing will start on the second item.
-
Select the maximum number of items to display in the list.
note note NOTE If you want the elements of your list to be displayed vertically ( Column ), the maximum number of items is limited according to the selected structure component (2, 3 or 4 columns). For more on selecting structure components, see Editing the email structure.
Populating the product listing populating-the-product-listing
To display a list of products coming from the event linked to the transactional email, follow the steps below.
For more on creating a collection and related fields when configuring the event, see Defining data collections.
-
Select the image component you inserted, select Enable personalization and click the pencil in the Settings pane.
-
Select Add personalization field in the Image source URL window that opens.
From the Context > Real-time event > Event context node, open the node corresponding to the collection that you created (here Product list ) and select the image field that you defined (here Product image ). Click Save.
The personalization field that you selected is now displayed in the Settings pane.
-
At the desired position, select Insert personalization field from the contextual toolbar.
-
From the Context > Real-time event > Event context node, open the node corresponding to the collection that you created (here Product list ) and select the field that you created (here Product name ). Click Confirm.
The personalization field that you selected is now displayed at the desired position in the email content.
-
Proceed similarly to insert the price.
-
Select some text and select Insert link from the contextual toolbar.
-
Select Add personalization field in the Insert link window that opens.
From the Context > Real-time event > Event context node, open the node corresponding to the collection that you created (here Product list ) and select the URL field that you created (here Product URL ). Click Save.
note important IMPORTANT For security reasons, make sure you insert the personalization field inside a link starting with a proper static domain name. 
The personalization field that you selected is now displayed in the Settings pane.
-
Select the structure component on which the product listing is applied and select Show fallback to define a default content.
-
Drag one or more content components and edit them as needed.
The fallback content will be displayed if the collection is empty when the event is triggered, for example if a customer has nothing in their cart.
-
From the Settings pane, edit the styles for the product listing. For more on this, see Managing email styles.
-
Preview the email using a test profile linked to the relevant transactional event and for which you defined collection data. For example, add the following information in the Event data section for the test profile you want to use:
For more on defining a test profile in a transactional message, see this section.