Create Drag-and-Drop Product Grids in Klaviyo

Instead of using Wunderkind's provisioned product grids (which rely on Klaviyo's HTML-only blocks and require custom coding) this page presents an alternative designed for teams without dedicated technical resources. If configuring HTML/CSS isn't feasible, follow the drag-and-drop setup outlined below.

📘 For general instructions on how to display dynamic properties from action payloads using Klaviyo templating code, head to our Developer Portal, where you'll find example JSON blocks and a breakdown of variables available for use in any part of the email template, for example in the hero section.

Set up your block in the Templates library

1. Go to the Templates page and click Create in the upper right.
2. Clear all default contents by selecting them and clicking the trash icon until only one Section remains.
3. With the remaining Section selected, go the Display tab at the top of the settings panel and click Add content repeat. Here you will configure the block creative to repeat once for each product passed via the Wunderkind metric, enabling efficient iteration over all products within a single block.
   • Repeat for: event.Items
   • Item alias: Items
4. After clicking Save, the cycle icon 🔄 will appear in the top corner of the settings panel, indicating that you've successfully added a Content repeat rule:

5. Now you'll divide the Section into two columns, allowing each dynamic product's image and name to sit side-by-side. From the Content panel, drag a Columns block into the Section:

6. In the Configure column layout modal, select 2 columns and split at 33%, 67%:

Design your block with dynamic elements

Now that you've set up a multi-column block to iterate over Wunderkind's products, it's time to start designing. Choose whether columns should stack in the mobile version of your grid, then expand the corresponding instructions.

💡 The instructions below require you to add dynamic variables to your content. All variables referencing {{Items...}} will populate based on the Content repeat settings set in the section above. As you move through the steps, feel free to brand and style your product grid as needed.

Preview your block with sample products

⚠️ In order to visually preview your block against sample product payloads, Wunderkind metrics must already exist under Analytics > Metrics with sufficient raw data.

1. In the Template editor, click Preview & test in the top right corner. This will bring you into Preview mode.
2. In the right panel, under Preview data source, switch to the Event tab, and select one of the wknd metrics.
   • Note: Once your AMP-triggered flows are created, you can similarly preview emails within the flow against profiles associated to the trigger metric. See instructions here.
3. Check visual rendering across desktop and mobile, then exit Preview mode.

Finalize your block as Universal content

1. In the Template editor, select the Section and use the star icon to save your block as Universal content.
   • 
2. Exit the Template editor.
3. Go to Content > Universal content to see your new block, which can be used globally throughout your AMP-triggered flows. To note, deleting the Template at this point will keep the Universal content block intact.