Creating Product Grid Using Drag-and-Drop Editor

Step-by-step instructions for creating a Wunderkind product grid using Klaviyo's drag-and-drop editor.

  1. Go to the Templates page
  2. Click "Create"
  3. Clear all default template contents by selecting them and clicking the trash can icon until only one Section remains
  4. On the remaining Section, in the Display tab, click on "Add content repeat":
    1. Repeat for: event.Items
    2. Item alias: Items
  5. From the "Content" panel, drag Columns into the Section
    1. In the "Configure column layout" modal, select 2 columns and split at 33% / 67%
  6. From the "Content" panel, drag an "Image" component into the left column
    1. Click "Select image" button > click the "Dynamic image" tab
    2. Input {{Items.WkImageUrl}} and click "Save"
    3. Set "Alt Text" to {{Items.WkCopy}}
    4. Set "Link address" to {{Items.WkUrl}}
  7. From the "Content" panel, drag a "Text" component into the right column
    1. Drop down the "Source code" option and paste: <a href="{{Items.WkUrl}}" style="color:#000000; font-size: 15px; font-family:sans-serif;text-decoration: none;" target="_blank">{{Items.WkCopy}}</a>and click "Apply"
    2. Enable “Full width on mobile” toggle
  8. From the "Content" panel, drag a "Button" component underneath the "Text" component
    1. Set "Link address" to {{Items.WkUrl}} and alight left in the "Styles" section
  9. Re-select the entire Section and add final touches in "Styles" tab:
    1. Set "Column content alignment" to align center
    2. Under "Mobile stacking", select "No stacking"
  10. Feel free to preview the block with dynamic products (Wunderkind metrics must already exist to do this)
    1. Click "Preview & test" (top right corner)
    2. In the right sidebar, under "Preview data source", choose the "Event tab", and choose one of the WKND metrics
    3. If previews look good, click "Done" on preview mode
    4. Once your Signals flows are created, you can similarly preview emails within the flow against profiles associated to the trigger metric. See instructions here
  11. Back in the Template editor, select the Section and use the star icon to save as a Universal Content Block
  12. Exit the Template editor and go to Universal Content page to see new block
    1. To note, deleting the Template at this point will keep the Universal Content intact

Similar to the instructions we provided on the parent page, feel free to brand your product grid as needed.