Advanced Styling For Browse Recovery Messages

You can use product tags and dynamic code in different ways to style your Browse Recovery messages.

Target specific products in your message

You can use product tags to target specific products from your array in your message or subject line. You can add the tag into the content directly, without an API loop.

If you want the first product in your array to show up in the subject line, you can add %%$product.(#product_id_1).title%% to the subject, where title can be any product attribute.

You can also use this syntax to style your message so that the products are in a layout of your choosing, rather than the default of being stacked. For example, you can style your message so that they are in a 3x2 grid.
Note: You need to make sure the rule the message is associated with will always show the exact number of products that will be in the grid. So, for this example, you want the browse recovery rule to show from 6 to 6 products.
The following steps are for targeting products in a 3x2 grid in a message using the Email Message Editor:
  1. Add 2 three column containers to your message.
  2. Add an image element to each container if you want your message to show images of the products. In the image settings, add the tag to the Image URL. You can also add tags to the other fields in the image settings.
  3. Add a text element to each container and add the tags for each product. For example, %%$product.(#product_id_1).product_attribute%% for the first product in the array and %%$product.(#product_id_2).product_attribute%% for the second product in the array, etc.

When you are finished, your message might look something like this:

Use Dynamic Code to style your message

You can use dynamic code to have a message display products a specific way, based on certain criteria.

For example, you can use dynamic code to have a message display a certain way if there is only 1 product result versus if there are many products. The following steps show how to do this in the Email Message Editor:

  1. Add a 1 column container to your message.
  2. Add an API Loop to the first container.
  3. In the API loop, add an HTML element and add {if "%%$product.(#product_id_2).title%%" eq ""}{literal}
  4. Add a second 1 column container and add elements to create a layout for when a single product is displayed.
  5. Add a third 1 column container, add an HTML element to it, and add {/literal}{else}{literal}
  6. Add a 2 column container and add elements to create a layout for when multiple products are displayed.
  7. Add another 1 column container, add an HTML element to it, and add {/literal}{/if}
  8. Add one more 1 column container.
  9. Go to the first container and find </> End API Loop. Move it to the last container.

When you are finished, your message should look something like this, depending on how you styled containers 2 and 4.