# Export to Klaviyo

Design in Figma, export with Sendra, import into Klaviyo as a custom HTML template. Klaviyo sends it exactly as you designed it.

## Before you start

- Decide where your images live. Sendra can host them (turn on **Host images online**), you can use your own image URLs, or you can let Klaviyo host them from the download. All three work, and the import steps cover each.
- Set your preview text in **Properties**. Klaviyo reads it from the file.
- Add the two things Klaviyo needs in every email, below.

## What Klaviyo needs in every email

Put an unsubscribe link and your mailing address in every email: Klaviyo will not send a custom HTML template without the link, and the law asks for the address. Both come from tags that Klaviyo fills in at send time, and Sendra passes them through untouched.

**Unsubscribe link.** Type "Unsubscribe" in your footer, select it, and put this in its **Link** field: `{% unsubscribe_link %}`. The link keeps your design's colour and font, and Klaviyo swaps in the right address for each recipient. A link on one word inside a sentence exports too, but Figma's link box will not accept a tag, so give the unsubscribe link its own text layer.

**Mailing address.** Put `{{ organization.full_address }}` in your footer text, and `{{ organization.name }}` where you want the company name. Klaviyo fills both from your account settings, so if you move, you change it once, in Klaviyo.

Note: type the tags exactly as shown, including the spaces inside the braces. See [Merge tags](/personalization-and-merge-tags/) for how Sendra treats them.

## Tags you will use most

Type these in Figma exactly as shown. Text tags go in a text layer, link tags go in a Link field.

| What it does | Tag | Where |
|---|---|---|
| First name, with a fallback when Klaviyo has none | `{{ first_name\|default:'there' }}` | text |
| Company name | `{{ organization.name }}` | text |
| Mailing address | `{{ organization.full_address }}` | text |
| Unsubscribe | `{% unsubscribe_link %}` | Link |
| Manage preferences | `{% manage_preferences_link %}` | Link |
| View in browser | `{% web_view_link %}` | Link |
| Your website | `{{ organization.url }}` | Link |
| Back to the cart, in an abandoned cart flow | `{{ event.extra.checkout_url }}` | Link |

Product name, image and price in a flow come from the event that triggered it, and the exact names depend on your store. Open the flow email's preview in Klaviyo: it lists every variable the event carries. Copy the one you need and paste it into a text layer, a Link field or an Image URL field in Sendra.

Rows that repeat once per product need a loop around the row, which is a step beyond a tag. Design a fixed number of rows for now.

## Preview text

For custom HTML templates, Klaviyo expects the preview text inside the file. Set it in Sendra's **Properties** before you export and it travels with the design.

## Import the template

1. In Klaviyo, go to Content, then Templates. Click Create, then Import email template.
2. Give the template a name.
3. Bring in the HTML, one of two ways:
   - Images already online (Sendra hosts them, or you used your own URLs): in Sendra, click Copy HTML. In Klaviyo, open the Paste HTML tab and paste.
   - Klaviyo hosting the images: in Sendra, choose Export package and unzip it. In Klaviyo, stay on Upload HTML file and select the HTML file. Then, under Upload additional files used in the template, select a zip of the images folder. Klaviyo hosts the images for you and updates the links in your template.
4. Leave the checkbox unticked. It is for triggered emails that are not marketing, such as order confirmations.
5. Click Import template.

## Check it

Send yourself a test from Klaviyo and compare it with the test you sent from Sendra. They should match; Klaviyo adds click tracking to your links, which is normal.

## Changing it later

Keep Figma as the source: change the design, export again, import again, and pick the new template in your campaign or flow. Klaviyo's drag and drop editor does not open custom HTML templates; if you need blocks your team can edit inside Klaviyo, Klaviyo's hybrid templates support that. See <a href="https://help.klaviyo.com/hc/en-us/articles/115005254188" target="_blank" rel="noopener">Klaviyo's guide</a>.

## Dynamic content

Klaviyo fills `{{ first_name }}`, product images and cart details at send time. [Merge tags](/personalization-and-merge-tags/) shows how to use them in text, links and image URLs.