Create Dynamic Product Heroes in Klaviyo

• At minimum, you've completed steps 1 & 2 here. You're at the stage of designing email steps within your AMP-triggered flows.
• You've familiarized yourself with Wunderkind's metrics, event properties and product grid guidance.

Table of Contents

• Step-by-Step Instructions
  • Drag-and-Drop Method
  • HTML Block Method
  • Preventing Duplicate Products
• Verify Your Results

Step-by-Step Instructions

First, open an email template that you intend to use in AMP integrations flows. This email could be attached to an existing flow message, or simply in your content library. Identify the existing hero section (headline + CTA) near the top of the email.

Drag-and-Drop Method

1. Add in an image block from the WYSIWYG panel:
   • 
2. We'll use dot notation within Klaviyo's template syntax to traverse the Items array in the metric payload. By default, the array is sorted by the recipient's interaction recency (most recent to least recent).
   • Click Select image, go to the Dynamic image tab, and paste {{ event.Items.0.WkImageUrl }}
     • 
     • In this syntax, 0 represents the first product in the zero-based array. We're pulling in the WkImageUrl field within the most recently interacted-with product.
   • In the Alt Text input, paste {{ event.Items.0.WkCopy }}
   • In the Link address input, paste {{ event.Items.0.WkUrl }}
     • If you wish to link other hero elements (such as the headline + CTA) to this dynamic product as well, apply the snippet within those respective Link addresses.
   • Do not enable Content repeat in the image block's Display tab. The end result should look like:
     • 
3. If you wish to display the dynamic product name beneath its image, this can be done in a similar manner to steps 1 & 2 above. Start off with a Text block:
   • 
4. In the Source code dropdown, paste the below and apply styling as desired

   • <a href="{{ event.Items.0.WkUrl }}" target="_blank">{{ event.Items.0.WkCopy }}</a>

HTML Block Method

If you'd prefer to use Klaviyo's HTML block instead of WYSIWYG blocks, use either of the below snippets in the HTML block's Content tab, then style as desired.

Product Image Only:

<a href="{{ event.Items.0.WkUrl }}" target="_blank">
	<img src="{{ event.Items.0.WkImageUrl }}" alt="{{ event.Items.0.WkCopy }}" width="300" border="0" />
</a>

Product Image + Name:

<a href="{{ event.Items.0.WkUrl }}" target="_blank">
	<img src="{{ event.Items.0.WkImageUrl }}" alt="{{ event.Items.0.WkCopy }}" width="300" style="display:block;border:0;" />
	<br>
	{{ event.Items.0.WkCopy }}
</a>

💡 To set up default fallbacks for dynamic properties expected by your email creatives:

• See Klaviyo's documentation on variable filtering
• Or, leverage Klaviyo's Show/Hide logic directly on the image/text blocks

Preventing Duplicate Products

By default, Product and Category AMP-triggered flows backfill extra product recommendations for the recipient. With these flows, you'll want to include an additional product grid below the hero section, to reinforce assortment and increase AOV. And because these product grids loop over the same event Items as the hero product, you'll need to prevent your template from displaying the same product twice. 

Luckily, Klaviyo's slice filter makes this easy. We'll use the filter to tell the product grid to start at the second item (skipping index 0). The exact steps to take depend on whether Content repeat is enabled in your product grid block's Display tab:

If Content Repeat IS enabled on your HTML product grid block

• Adjust the Repeat for expression to: event.Items|slice:"1:"
• 

If Content Repeat IS NOT enabled on your HTML product grid block

• In the HTML, find the for loop: {% for Items in event.Items %}
• Update to: {% for Items in event.Items|slice:"1:" %}

Verify Your Results

Follow the instructions here to test your template against real AMP metric data before launch 🚀

When flipping through recent events/profiles:

• Confirm that the hero product image/copy change per preview.
• Confirm the hero links to the correct product page.
• If displaying both a hero product and a grid beneath, confirm that no products repeat in the template—the grid should start from the second dynamic product.