Add Product Grids
Transform raw metric data into product showcases that make every email feel personalized
Product Grid Data
The metrics that trigger your Signals flows will populate relevant product data tailored to each recipient. See example event payloads here. We'll leverage this data to bring personalized shopping experiences to life within your email designs.
Product Grid Creative
Wunderkind's standard implementation relies on Klaviyo's HTML-only blocks. If configuring custom code isn't feasible for your team, follow the drag-and-drop setup outlined here instead.
In your Klaviyo Universal content library, find two HTML blocks pre-built by Wunderkind. These blocks visualize metric data as product grid sections. Apply your branding as desired, then insert into any email triggered by a Signals metric.
- Wunderkind Product Grid
- Wunderkind Product Grid - Stacking
The cycle icon 🔄 on each block indicates that it's configured with a Content repeat loop, which repeats the creative once per dynamic product passed in the metric payload, enabling efficient iteration over all products within a single block.
Both blocks use a multi-column layout on desktop, allowing each product card to be its own "row":
The only difference between the two product grid blocks is how the layout responds on mobile devices.
The standard option maintains the desktop layout on mobile, scaling down the image and tightening space between design elements.
The stacking option gives each design element its own row on mobile. A product's image, name and button all appear "stacked" ontop of each other.
For guidance on displaying dynamic metric properties using Klaviyo's templating language, visit the Metrics Properties page.
For help with HTML/CSS issues, see Klaviyo's common troubleshooting steps.
Updated 4 days ago