> For the complete documentation index, see [llms.txt](https://docs.roadmap.so/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.roadmap.so/reviews/integrations/klaviyo-review-integration/how-to-create-your-email-design-less-design-restrictions.md).

# 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**.

{% code title="Dynamic image (product 1)" %}

```liquid
{% 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 %}
```

{% endcode %}

### Add the dynamic product title (right column)

Insert the product title variable

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

{% code title="Product title (product 1)" %}

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

{% endcode %}

Link the title to the product page

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

{% code title="Product link (product 1)" %}

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

{% endcode %}

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

{% code title="Review form link (product 1)" %}

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

{% endcode %}

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

{% code title="Dynamic image (product 1)" %}

```liquid
{% 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 %}
```

{% endcode %}

### Product title

{% code title="Product title (product 1)" %}

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

{% endcode %}

### Product link

{% code title="Product link (product 1)" %}

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

{% endcode %}

### Review form link

{% code title="Review form link (product 1)" %}

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

{% endcode %}

Product 2 snippets (index 1)

### Dynamic image

{% code title="Dynamic image (product 2)" %}

```liquid
{% 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 %}
```

{% endcode %}

### Product title

{% code title="Product title (product 2)" %}

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

{% endcode %}

### Product link

{% code title="Product link (product 2)" %}

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

{% endcode %}

### Review form link

{% code title="Review form link (product 2)" %}

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

{% endcode %}

Product 3 snippets (index 2)

### Dynamic image

{% code title="Dynamic image (product 3)" %}

```liquid
{% 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 %}
```

{% endcode %}

### Product title

{% code title="Product title (product 3)" %}

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

{% endcode %}

### Product link

{% code title="Product link (product 3)" %}

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

{% endcode %}

### Review form link

{% code title="Review form link (product 3)" %}

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

{% endcode %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.roadmap.so/reviews/integrations/klaviyo-review-integration/how-to-create-your-email-design-less-design-restrictions.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.