> 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-dynamic-table.md).
# How to create your email design (Dynamic Table)
How to create a dynamic table
This walkthrough shows how to create **one “universal” post‑purchase review email** in Klaviyo that works for customers who ordered one item *or* multiple items. The key is adding a **dynamic table** that repeats once per line item and generates the correct product image, name, and review link.
This page follows the exact flow shown in the screencast: open the review flow → edit the email → insert a Table block → switch it to Dynamic → paste the Roadmap Liquid snippets → preview and verify each item links to the right review form.
{% stepper %}
{% step %}
### What you’ll build
This walkthrough shows how to create **one “universal” post‑purchase review email** in Klaviyo that works for customers who ordered one item *or* multiple items. The key is adding a **dynamic table** that repeats once per line item and generates the correct product image, name, and review link.
This page follows the exact flow shown in the screencast: open the review flow → edit the email → insert a Table block → switch it to Dynamic → paste the Roadmap Liquid snippets → preview and verify each item links to the right review form.
{% endstep %}
{% step %}
### Open your post‑purchase review email
* Open the review flow in Klaviyo.
* In Klaviyo’s flow builder, open your post‑purchase review flow (for example, **Post Purchase Review Flow (Single Email)**).
* Select the email step (for example, **Post‑purchase review flow (Universal Email)**) to open it in the email editor.
{% endstep %}
{% step %}
### Add a Table block (the repeating item section)
Insert a Table block
* In the email editor, drag a **Table** block into your email where you want the list of items to appear.
* Use the Table layout to choose where your content goes (common setup: **image on the left**, **text on the right**). You can swap columns later.
{% endstep %}
{% step %}
### Turn the table into a dynamic (repeating) table
Switch the Table data from Static to Dynamic
1. Select the **Table** block, then open the **Styles** tab.
2. In the **Data** section, change from **Static** to **Dynamic**.
Set the data row and alias
In the Dynamic settings, set:
* **Data row** to `event.extra.lineItems.edges`
* **Item alias** to `item`
This tells Klaviyo to repeat the table once for each line item in the order.
{% endstep %}
{% step %}
### Make the image and text dynamic
Now that the table repeats per item, replace the placeholder content with Roadmap’s Liquid variables.
Make the product image dynamic
* Select the image cell in your table. In the image settings, choose **Dynamic Image**, then paste:
```
{{ item.node.product.featuredImage | default:"" }}
```
* Save your changes. In preview, the product image should populate for each item.
Add the item name (and optional product link)
* Select the text cell and replace the placeholder copy with the item title:
```
{{ item.node.title | default:"" }}
```
* If you want the item name to link to the product page, use this URL format:
```
{{ organization.url }}/products/{{ item.node.product.handle | default:"" }}
```
You can also include other item properties (like price) by copying the relevant dynamic properties from the event data and using the final part of the variable inside your table.
{% endstep %}
{% step %}
### Add the per‑item “Leave a review” link
Your call-to-action (CTA) should send customers to the Roadmap review form for the specific product in that table row.
Create your CTA text
* Add CTA copy in the text column (for example, **Leave a review**, **Share your thoughts**, or **Love to hear from you**).
Link the CTA to the Roadmap review form
* Set the CTA link to the following URL (product is dynamic per row; order stays the same for the email):
```
{{ organization.url }}/pages/review-form?productId={{ item.node.product.id | default:"" }}&orderId={{ event.roadmapOrderId|default:"" }}
```
* If you also want the product image to be clickable, you can use the same link on the image element.
{% endstep %}
{% step %}
### Style the block, then add non‑dynamic sections
* Once the dynamic table is working, style it like any other Table block—padding, image sizing, text alignment, and spacing.
* After that, add any blocks that should appear the same for every recipient (for example, an Instagram callout, loyalty signup, or other brand touchpoints).
{% endstep %}
{% step %}
### Preview and confirm it works for multi‑item orders
Open Preview
* Click **Preview & test** to enter preview mode.
* Confirm the table repeats once per line item and that images and titles populate correctly.
Verify each CTA goes to the correct product
* In preview, click each product’s **Leave a review** link. Each one should open the Roadmap review form for that specific product from the order.
If your dynamic table doesn’t repeat (or renders blank), double-check the **Data row** (`event.extra.lineItems.edges`) and the **alias** (`item`). A mismatch will prevent the variables from resolving.
{% endstep %}
{% step %}
### Liquid snippets used in this walkthrough
Dynamic table settings
* **Data row**: `event.extra.lineItems.edges`
* **Alias**: `item`
Image
```
{{ item.node.product.featuredImage | default:"" }}
```
Item title
```
{{ item.node.title | default:"" }}
```
Product link
```
{{ organization.url }}/products/{{ item.node.product.handle | default:"" }}
```
Review form link
```
{{ organization.url }}/pages/review-form?productId={{ item.node.product.id | default:"" }}&orderId={{ event.roadmapOrderId|default:"" }}
```
{% endstep %}
{% endstepper %}
---
# 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-dynamic-table.md?ask=&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.
