Skip to main content
All CollectionsPredictive Personalization SuiteProduct Recommendations
Creating Product Recommendations Merchandise Blocks
Creating Product Recommendations Merchandise Blocks

Learn all about the features and design options of the Email Product Recommendations and Onsite Product Recommendations.

Updated over a year ago

What are Merchandise Blocks?

A Product Recommendations Merchandise Block allows you to customize the appearance of the products used in an email and on-site. The specific products that appear in the Merchandise Block will be determined by the recipe you use, which can be customized to fit your specific goals.

There are two types of Merchandise Blocks, email and website, that provide code that can be added to an email or site page to display the product recommendations. Use the links below to learn how to set up each type of block.



Email Recommendations Merchandise Blocks

Consider Your Design

Before you begin setting up your Merchandise Block there are a few things to consider.

  • Once you have chosen a number of products to appear this cannot be changed

  • The easiest way to change the dimension of a merchandise block is to create a new block

  • Only one Merchandise Block should be included in a single email

Set Up

Setting up a Merchandise Block for email allows you to select the size of your recommendations, create a image design template, and determine the number of products that appear in the email. The last step is to then assign a recipe that you created. In a merchandise block you can include between 1 and 25 products.

  1. Navigate to Solitons > Recommender Merchandise Blocks.

  2. Select New Merchandise Block.

  3. Choose the Email radio button.

    Create an email merchandise block
  4. Select the number of products you would like to display.

    πŸ’‘ Only one Merchandise Block should be used per email. The recommendations can be placed in multiple location in the same email if included in the same Merchandise Block.

  5. To create a customized Merchandise Block select No to using a pre-made template. These templates are available to all Listrak clients. Learn more about Listrak-designed templates.

  6. Set your canvas size.

    πŸ’‘ The canvas is the size of the entire merchandise block. The number of rows and columns available will depend on the number of products included.

Designing Your Merchandise Block

Along the side of the Merchandise Block preview are the areas you can customize. The Item Design and Block Design are optional design elements to customize the appearance used in email. Applying a Recipe is a required step in order for Product Recommendations to appear in an email. Click on the different design options to edit the properties.

You can utilize your custom item designs by clicking Use Existing Item Design option.

Item Design

The item designer allows you to customize the look and feel of the items, such as fonts, colors, and adding additional elements. This design will be applied to all products in the Merchandise Block.

The following elements are available in the item designer:

  1. Design Preview: Shows a preview of the design for a single product based on what you have customized.

  2. Design Elements: Each element or component you include in a design are included in the design element layers.

  3. Element Properties: Each of the elements you add to the design will allow you to customize properties in the bottom left corner.

  4. Additional Elements: By default, the design will include a product image and product title, any additional elements can be added from these icons.

    1. Image: The picture icon allows you to select from pre-defined images, or upload your own.

    2. Text: The text element allows you to add additional text to the item design. This element is often used to create CTAs, such as Shop Now Buttons.

    3. Dynamic Elements: The gear icon allows you to add additional pieces of dynamic information that is unique per product, such as price. This information is pulled from the Listrak Product File. Learn more about Listrak's Product Data schema.

  5. Product Preview: Use the refresh button or type in the name of a specific product to view its appearance based on your design.

⚠️ The products will appear randomly and may include products you have

excluded in your recipe.

Once you have customized the appearance of the item Apply and Preview in Block. This will return you to the block preview page where you can continue to customize your merchandise block via the options in the left sidebar.

Block Design

The second element along the left sidebar you can use to customize a Merchandise Block is the Block Design. This allows you to adjust the appearance of the entire block.

πŸ’‘ The Merchandise Block designer only displays the desktop layout. Think about how your block will appear on mobile when adjusting elements between blocks, such as text, that may change appearance on mobile.

⚠️ When adding merchandise blocks to Composer only the item design will be used. Use Composer's built-in structures and content to add headlines and other design elements.


The following elements are available in the item designer:

  1. Block Properties: Shows the current size of the block. Clicking the information icon allows you to change the size of the block. This will change block size only. Item size will not change.

  2. Item Layers: Each item will appear in its own layer. Use the properties (see 3-5) to adjust the appearance of each item.

  3. Background Adjustment: You can apply a background color and change its opacity. The product image is rendered as a jpeg and will have the colored background from the product image or appear white.

  4. Border Adjustment: You can apply a border around the entire product image and adjust its dimension and color.

  5. Size Adjustment: Adjust the size and position of the individual products in a Merchandise Block.

  6. Additional Elements: By default the design will include each individual product, but you can add additional elements by selecting from these icons.

    1. Image: The picture icon allows you to select from pre-defined images, or upload your own.

    2. Text: The text element allows you to add additional text to the item design. This element is often used to create CTAs, such as Shop Now Buttons.

    3. Dynamic Elements: The gear icon allows you to add additional pieces of dynamic information that is unique per product, such as price. This information is pulled from the Listrak Product File. Learn more about Listrak's Product Data schema.

  7. Preview: Use the refresh icon to load other products to see the appearance of the Merchandise Block.

Once you have customized the appearance of the item click Apply and Preview in Block. This will return you to the block preview page where you can continue to customize your merchandise block via the options in the left sidebar.

Apply Recipes

The last step in customizing a Merchandise Block is to Apply Recipes. This will connect the specific products that will appear in the email (the recipe) to the design that you created in the Merchandise Block.

To apply a recipe:

  1. Click on the product(s) that you would like to apply a recipe to.

    πŸ’‘ Apply multiple recipes by only selecting some products.

  2. To quickly select all products use the Select All option.

  3. Select the specific recipe from the list. All recipes you have saved will appear here. You will only need to select the main recipe.

  4. Apply Selected Recipe.

  5. If applying multiple recipes repeat until all items have a recipe applied.

  6. Preview in Block.

Save the Merchandise Block

Once the Merchandise Block has been designed you are ready to save it.

On the main preview page, give the Merchandise Block a name and click Save.

πŸ’‘ The Merchandise Block name is used in the reporting available.

Once you have saved your Merchandise Block you can add it to an HTML or Composer email.


Using Listrak-Designed Templates

When creating a Merchandise Block you can create a custom design or use a Listrak-designed template. When using a template:

  1. Select the number of products in a block.

  2. Select the layout of products. This will differ based on the number of products included in the block.

  3. Select the template style from the creative options.

  4. Select the specific creative theme. This option is not available for all template styles.

  5. Preview the block setup.

  6. Edit the item design or block design or save your block and add it to an email.

Use an Existing Item Design

Using an existing item design allows you to re-use a customized item design that you had previously created. This is a useful time-saving option if you are adjusting the number of items in different Merchandise Blocks.

⚠️ The existing item design will use the same item dimensions from the original Merchandise Block.

  1. Select the Existing Item design option on the Preview page.

  2. Select the specific design from the carousel.

  3. Select Item Design Template.

  4. Edit the item design or block design or save your block and add it to an email.



Website Recommendations Merchandise Blocks

Set Up

The set up of the Merchandise Block for websites in the Listrak Platform is quick because most of the design elements will be controlled by your website's CSS.

  1. In the Solutions navigation find the Recommender option.

  2. Then select Merchandise Blocks.

  3. Select New Merchandise Block.

  4. Choose the Website radio button.

    Create a website block
  5. Name the block.

    πŸ’‘ This name will be used in Listrak's Merchandise Block Reporting

  6. Select the number of products you would like to appear.

  7. Use the radio button or click and drag to multi-select products.

  8. Click Apply Recipe.

  9. Select the recipe to apply it to the select product.

    πŸ’‘ Apply multiple recipes by only selecting some products.

  10. Save the Merchandise Block.

Gathering the Code

Once you have saved your merchandise block you can gather the code that will be added to your website.

  1. On the main merchandise block page, locate your merchandise block.

  2. Click on the Code button for your desired block.

  3. In the code popup, copy the information from the Website tab.

Website Code Example

This code can then be placed on your website. This code is often placed on a page template so that recommendations can be customized for product pages, the home pages, or category pages. Learn more about integrating these on your website or work with your Account Manager or Listrak Implementation team.

Did this answer your question?