In this guide, you will learn the different methods you can use to add product recommendations to an email and how you can update your Product Recommendations that are already included in an email. Before adding the Product Recommendations to an email, the Merchandise Block must be created.
Methods to Add Product Recommendations to Email
⚠️ Before adding product recommendations to an email, finalize your merchandise block creative. If you update your merchandise block creative by changing fonts, colors, image sizes, or other properties you will need to delete the current version in your email and add the new version.
Built-in Composer Element
The built-in Composer element provides the simplest and fastest way to add product recommendations merchandise blocks to an email by selecting a merchandise block and then setting your desktop and mobile layout. Using the same desktop and mobile layouts as other structures in Composer product recommendations can be added seamlessly.
Before you begin adding a merchandise block to Composer, the following settings need to be in place:
A recipe (or more) must be applied to every item in the Merchandise Block.
In the Merchandise Block, no two items can be overlapping.
On the main Merchandise Block listing, enable the Show in Composer checkbox.
If these settings are not in place the Merchandise Block cannot be added to Composer.
In the email you would like to add recommendations to:
Drag the Recommended Products element to the desired location.
Click Browse.
Select a Merchant from the drop-down menu if you have more than one merchant enabled.
Select a Merchandise Block from the drop-down.
💡 If your merchandise block does not appear, confirm that the settings above are configured.
Click Continue.
Select a Desktop Layout. If your Merchandise Block contains more products than the desktop layout multiple rows will be added.
Click Continue.
Select a Mobile Layout. The mobile layouts match the mobile layouts of the structures available when building a message.
Click Done.
The selected Recommendations will now appear in your Listrak Composer Message.
Custom Composer Design
The Custom Composer Design option allows you to employ Composer's easy drag-and-drop interface while creating a more customized layout for your Product Recommendations.
One common example of an advanced design is a zig-zag or S-curve design where the text and image of a product recommendation are laid out next to each other instead of on top of each other.
Generate Your Product Recommendations Links
The first step is to generate the links that will be used in your custom Composer design. These links are generated by Listrak based on the Merchandise Block design.
⚠️ If you update your merchandise block design in the Item Design or Block Design section you will need to use the new links that are generated.
Navigate to Solutions > Recommender Merchandise Blocks.
Locate the Merchandise Block to add to your email.
Click the Code Icon.
Open the Advanced Email Code tab of the popup.
Copy the content from this tab into a text editor for easy access.
Set Up the Composer Layout
After your links are gathered, the second step is to add the Composer elements to the email you are creating. For example. for the S-Curve design, use a two-column structure with an image component in each column.
Drag a structure onto the canvas.
Drag image elements for each component of your recommendations design.
Repeat the steps above if you would like to add multiple structures.
Adding the Product Images and Links to the Design
Open the links you copied from the Merchandise Block.
Open the Image Properties tab of the first image.
Copy the link from the Link URL (highlighted in blue) of the Product 1 section of the code you copied. You will only need the Link URL between the quotation marks.
💡 The Link URL ends with #Listrak\Email#
Paste this link in the Link URL in the Properties panel.
.Add your Alternative Text and Link Title.
Copy the link from the Image URL (highlighted in red) of the Product 1 section of the code you copied. You will only need the Link URL between the quotation marks.💡 The Image URL ends with #Listrak\Email#
Paste this link in the Image URL in the Image Source popup.
Click Submit.
Repeat steps 2-8 for any additional images in Product 1.
Repeat steps 2-9 for additional products that are included in the Merchandise Block.
Finalize Your Design
After you have added your links you can complete the design of your product recommendations. Adjust properties such as mobile layout, change vertical alignment, and more.
Responsive HTML Emails
If you are designing emails using HTML you can add product recommendations to an email by inserting the image and link URLs generated by the Merchandise Block into a table structure.
This process can also be used to add Product Recommendations to a Composer email using the Custom HTML component. Be sure to test the message for rendering when using this element.
Creating a Table Structure
Before you begin adding Product Recommendations, create the table structure where the images will be added to an email. The table structure can be customized to contain the correct width, number of columns, padding, and any additional customizations to maintain your branding and fit with the design of the email.
Generate Your Product Recommendations Links
Once your table structure is created you can gather the image and link URLs that will be added to the table structure to display your Product Recommendations. These links are generated by Listrak based on the Merchandise Block design.
⚠️ If you update your merchandise block design in the Item Design or Block Design section you will need to use the new links that are generated.
Navigate to Solutions > Recommender Merchandise Blocks.
Locate the Merchandise Block to add to your email.
Click the Code Icon.
Open the Advanced Email Code tab of the popup.
Copy the content from this tab into a text editor for easy access.
Adding Links to the Email
Paste the Link URL (first line of code) of Product 1 into the cell of your table.
Paste the Image URL (second line of code) of Product 1 into the cell of your table.
If multiple Link and Image URLs exist for Product 1, add those to the same cell from steps 1 & 2.
11. Repeat these steps for each product included in your Merchandise Block.
💡 Each product should be added to its own cell
Below is an example of a Merchandise Block that contains a single Link and Image URL per product.
Updating Product Recommendations in Email
When updating Product Recommendations in an email the process to update will depend on if you are updating the 1) recipe or 2) merchandise block design.
Updating a Product Recipe
When updating a product recommendations recipe you will not need to update the Product Recommendations that have been added to the email. To update Product Recommendations recipes used in Merchandise Block you can make changes in the Merchandise Block designer.
Updating a Merchandise Block Design
When updating a Merchandise Block Design element, such as font size, image size, or adding additional design elements, such as price, you will need to change the recommendation that has been added to an email.
1. When using the built-in Composer element, delete the structures that contain your current recommendations and then drag in a new Recommended Products element. You can then choose the desktop and mobile layouts as described above.
2. When using the Custom Composer option you will need to generate new product links based on the updated design. These links will replace the links for both the image URL in the image source and the Link URL for every product.
3. When adding Product Recommendations to an HTML email you will need to generate new product links based on the updated design. These links will replace the links for image URL and Link URL for every product in your table structure.