How to create your email design (Less design restrictions)

This walkthrough shows how to create a 2-column product row in your email that:

• Displays the purchased product image (dynamic)

• Displays the purchased product title (dynamic)

• Links the title, image, and CTA button to your Roadmap review form with the correct productId and orderId

The screenshots in this guide use the Klaviyo email template editor. You’ll be pasting Liquid into Klaviyo blocks so the content populates from the Roadmap order event.

Create the 2-column layout

1. Drag in a Table block

2. In the email editor, open the Content tab (left panel) and drag a Table block into your email.

3. This table will be your 2-column row: image on the left, text on the right.

4. Set each column’s content type

5. Select the table block, then in the Content tab set the column types so you can place:

• Left column: Image

• Right column: Text

Add the dynamic product image (left column)

1. Choose Dynamic Image

2. Click the image area in the left column, then click Select Image and choose Dynamic Image.

3. Paste the dynamic image Liquid

4. Paste the snippet below into the Dynamic Image field, then click Save.

Dynamic image (product 1)

{% if event.extra.lineItems.edges.0.node.product.featuredImage %} {{ event.extra.lineItems.edges.0.node.product.featuredImage }} {% else %} {{ event.extra.lineItems.edges.0.node.variant.variantImage }} {% endif %}

Add the dynamic product title (right column)

Insert the product title variable

Click into the text area in the right column and paste:

Product title (product 1)

{{ event.extra.lineItems.edges.0.node.title|default:'' }}

Link the title to the product page

Select (highlight) the product title text, add a link, and use:

Product link (product 1)

{{ organization.url}}/products/{{ event.extra.lineItems.edges.0.node.product.handle|default:'' }}

You can style this text (font size, bold, padding, alignment) using the editor’s styling controls.\

Add the review form link (image + buttons)

This link sends customers to your Roadmap review form and ensures the form loads the right product and attributes the review to the right order.

Copy the review form URL

Review form link (product 1)

{{ organization.url }}/pages/review-form?productId={{ event.roadmapProductIds.0|default:'' }}&orderId={{ event.roadmapOrderId|default:'' }}

Add it to your CTA button

Click your CTA button (for example, LEAVE A REVIEW) and paste the URL into the button’s Link address field.

(Optional) Link the product image too

Select the image block and apply the same review form URL so clicks on the product image also open the review form.

Preview and confirm the dynamic data

Use Preview & test to confirm the product image, title, and links populate correctly for a real event.

In Preview, pick a recent Roadmap order event (for example, a “Placed Order (Roadmap)” event). That’s the fastest way to validate that productId and orderId are present and your email is pulling the correct line item.\

What customers see after clicking

When the customer clicks your image or CTA button, they land on your Roadmap review form page. The form uses the URL parameters to load the correct purchased product and attribute the submission to the correct order.

Add more products (2nd, 3rd, 4th item in an order)

To show additional items from the same order, duplicate your table row and switch the index number in the Liquid snippets:

• Product 1 uses index 0

• Product 2 uses index 1

• Product 3 uses index 2

• …and so on

If an order sometimes contains fewer items than you’ve added blocks for, extra blocks may render blank. Consider only adding as many product rows as you typically need.\

Product 1 snippets (index 0)

Dynamic image

Dynamic image (product 1)

{% if event.extra.lineItems.edges.0.node.product.featuredImage %} {{ event.extra.lineItems.edges.0.node.product.featuredImage }} {% else %} {{ event.extra.lineItems.edges.0.node.variant.variantImage }} {% endif %}

Product title

Product title (product 1)

{{ event.extra.lineItems.edges.0.node.title|default:'' }}

Product link

Product link (product 1)

{{ organization.url}}/products/{{ event.extra.lineItems.edges.0.node.product.handle|default:'' }}

Review form link

Review form link (product 1)

{{ organization.url }}/pages/review-form?productId={{ event.roadmapProductIds.0|default:'' }}&orderId={{ event.roadmapOrderId|default:'' }}

Product 2 snippets (index 1)

Dynamic image

Dynamic image (product 2)

{% if event.extra.lineItems.edges.1.node.product.featuredImage %} {{ event.extra.lineItems.edges.1.node.product.featuredImage }} {% else %} {{ event.extra.lineItems.edges.1.node.variant.variantImage }} {% endif %}

Product title

Product title (product 2)

{{ event.extra.lineItems.edges.1.node.title|default:'' }}

Product link

Product link (product 2)

{{ organization.url}}/products/{{ event.extra.lineItems.edges.1.node.product.handle|default:'' }}

Review form link

Review form link (product 2)

{{ organization.url }}/pages/review-form?productId={{ event.roadmapProductIds.1|default:'' }}&orderId={{ event.roadmapOrderId|default:'' }}

Product 3 snippets (index 2)

Dynamic image

Dynamic image (product 3)

{% if event.extra.lineItems.edges.2.node.product.featuredImage %} {{ event.extra.lineItems.edges.2.node.product.featuredImage }} {% else %} {{ event.extra.lineItems.edges.2.node.variant.variantImage }} {% endif %}

Product title

Product title (product 3)

{{ event.extra.lineItems.edges.2.node.title|default:'' }}

Product link

Product link (product 3)

{{ organization.url}}/products/{{ event.extra.lineItems.edges.2.node.product.handle|default:'' }}

Review form link

Review form link (product 3)

{{ organization.url }}/pages/review-form?productId={{ event.roadmapProductIds.2|default:'' }}&orderId={{ event.roadmapOrderId|default:'' }}