Uploading your emails to Klaviyo

Emailify includes a built-in integration with Klaviyo, which lets you upload HTML emails directly from the Figma plugin directly to your Klaviyo templates.

Video Tutorial: Uploading your emails to Klaviyo

This video walks through how to upload HTML emails from the Figma Emailify plugin to Klaviyo.

If you need Klaviyo template links (for example, {{ event.url }}) in your text paragraphs, Figma's native link field will block them as invalid URLs. To get around this, you can use Emailify's special Klaviyo link format instead, https://klaviyo.invalid/?{{ event.url }}, and Emailify will output the raw Klaviyo template syntax in your exported HTML.

In the Emailify export panel, select the Klaviyo option from the dropdown list, then paste in a valid Klaviyo private API key (via the steps below):

  1. Login to Klaviyo and go your Klaviyo API Keys settings page.
  2. Click the Create Private API Key button.
  3. Give it a name (for example, "Emailify API Key") and click the Custom Key radio button.
  4. Set the Templates API Scopes radio button to Read/Write Access (all other API scopes can can be left as No Access).
  5. Click the Copy icon button under the Your Private Key section on the API creation success screen.
  6. Paste your copied API key (which should look something like pk_b3338b071136f98817d2a0e0a9581137ee) into the Emailify plugin.

When you're ready, click the Upload To Klaviyo button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your Klaviyo templates page.

If your HTML email size is under 102kb, but your email is still being clipped in Gmail after being sent from Klaviyo, this is caused by having link tracking turned on in Klaviyo, which automatically swaps your original link URLs into much longer "tracking URLs" and increases the file size of your HTML that's sent out. To prevent this from happening, you can optionally turn off the link tracking/GA setting in your Klaviyo account.

Updating Klaviyo templates uploaded from Emailify ​

If you'd like Emailify to automatically update the same Klaviyo template instead of creating a new template each time, you can optionally enable the Enable Updatable Templates toggle in the plugin's export settings when the Klaviyo option is selected.

This will automatically append a klaviyoTemplateId value to the Figma frame name after the first successful upload, and Emailify will re-use that stored template ID the next time the same frame is uploaded to Klaviyo.

Please make sure the Enable Updatable Templates toggle is enabled before you upload the template for the first time. That initial upload is what stores the original Klaviyo Template ID in your Figma frame name for future re-uploads.

This only updates the saved template in your Klaviyo templates library. If that template has already been used in a Klaviyo campaign or flow, Klaviyo creates a copy for that message, so re-uploading from Emailify will not automatically replace those in-use copies.

Using your uploaded Klaviyo email template in a campaign ​

  1. Create a new email campaign in Klaviyo
  2. Click on your new template name in the Email:saved tab on the Templates page list.
  3. Click the Use template button in the popup preview window.
  4. Click the Save button on the code editor page (this step is important)
  5. After "Your changes have been saved.", click the Back to Content button.
  6. Schedule your email campaign as needed.

A/B testing custom HTML templates in Klaviyo ​

Klaviyo supports A/B testing custom HTML emails, but creating the test automatically makes Variation B an identical copy of Variation A. To test two different Emailify designs:

  1. In Figma, give the two Emailify frames clear names, for example, Summer Sale - Test A and Summer Sale - Test B. Emailify uses these frame names for the saved template names in Klaviyo.
  2. Upload both frames to Klaviyo as separate saved templates.
  3. Use the Test A template to create your Klaviyo campaign, then click Create A/B test above the subject line. Klaviyo will create Variation B as a copy of Variation A.
  4. In another browser tab, open the saved Test B template under Content > Templates, open its code editor, and copy all of the HTML.
  5. Return to the campaign, open Variation B, click Edit, replace the copied Test A HTML with the Test B HTML, and save your changes.
  6. Give both variations descriptive names, then preview or test-send each version and review the plain-text version before scheduling the campaign.

If you are testing the email design or content, keep the subject line and sender details the same so only one variable changes.

For more information about configuring the test and selecting a winning metric, read Klaviyo's A/B testing guide.

Editable text/images in Klaviyo (optional) ​

IMPORTANT: Klaviyo's new editor adds automatic padding to editable text blocks and buttons. Unfortunately, you will need to manually override each of these back to "0" to get the email looking like your original designs from Figma by following the video under the Fixing Klaviyo's automatic padding overrides in editable campaigns section below.

If you want to enable content blocks to be editable after the template has been uploaded to Klaviyo, enable the Editable Content toggle in the Emailify export options, and then follow the steps below in Klaviyo:

  1. Create a new email campaign in Klaviyo
  2. Click the Drag and Drop option in the campaign Content step
  3. Click the My Templates tab, then click on your new template
  4. Click the Save button, then click Back to Content
  5. Click the Edit Email button

Fixing Klaviyo's automatic padding overrides in editable campaigns ​

Due the Klaviyo updating their editor, and forcing all templates to use it as of June 6th 2023; unfortunately, if you're exporting HTML emails with the Editable Content toggle enabled in Emailify, Klaviyo will automatically apply ~18px of additional padding around each text element by default, as an inline style attribute to a new <td> element that it injects into the HTML if it's an editable template.

Enabling the Force the padding added by Klaviyo's new editor to be 0px toggle in Emailify does automatically add some extra CSS to remove this padding for all mobile clients and non-Outlook desktop clients like Gmail etc, however, Outlook will still render the padding unless each of the "Padding" values for any editable text blocks in your template are manually changed to "0" when editing the email for your Campaign in the Klaviyo editor.

Adding a dynamic product feed to your Klaviyo emails ​

Video Tutorial: Adding a dynamic product feed to your Klaviyo emails

This video walks through how to add custom Klaviyo product feeds into custom HTML templates with the Emailify Figma Plugin.

To add a dynamic Klaviyo product feed to your HTML email template in Emailify, you have the option of using one of the component presets under the Ecomm tab in the Emailify plugin category tabs.

After you've added the component to your Emailify frame, you need to swap the YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE name in the component that's added with your own Klaviyo Product Feed name that you've created in your Klaviyo account as a product feed.

To use custom HTML product feeds in Klaviyo, you'll also need to ensure that the Editable Content toggle in the Emailify export options, which will allow you to drag and drop a default "Product" block from the Klaviyo editor's "Blocks" sidebar into your email after it's uploaded to your Klaviyo Templates.

It's worth following the video tutorial above to watch how to do this step by step, and ensure that your Klaviyo template is setup correctly, otherwise the data from your product feed may not show up if you haven't followed the steps correctly.

If you need a hand with this, please reach out to a developer on your team, or your Klaviyo support rep, as we (Emailify) can't provide any technical expertise or assist with any custom implementations of this more advanced templating feature in Klaviyo.

Manually adding editable region to drag/drop the Klaviyo Product Feed ​

Since 2025, it seems like you also need to manually include this editable region to your HTML template via Klaviyo's own HTML template code editor first and re-save the template before using it in a campaign, to ensure the dynamic product feed loads any data:

<table>
  <tr>
    <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
      <div class="klaviyo-block klaviyo-text-block">
        Drag and Drop your Klaviyo Product Feed Block Here <br/>
        NOTE: Remove this text element in Klaviyo's editor when you're done! <br/>
        Video Tutorial: <a href="https://www.youtube.com/watch?v=PaRSIxVLYlo" target="_blank">https://www.youtube.com/watch?v=PaRSIxVLYlo</a>
      </div>
    </td>
  </tr>
</table>

You can paste it in the line above: <div dir="auto" lang="en"... in your HTML template while inside the Klaviyo template editor, which will add it to the top of your template.

Adding an abandoned cart product feed to your Klaviyo emails ​

Video Tutorial: Create Klaviyo abandoned cart flow email template in Figma

This video walks through how to add custom Klaviyo abandoned cart flows into custom HTML templates with the Emailify Figma Plugin.

To add a dynamic Klaviyo abandoned cart flow block to your HTML email template in Emailify, you have the option of using one of the component presets under the Ecomm tab in the Emailify plugin category tabs for the following variants:

  • Shopify
  • WooCommerce
  • Magento 1
  • Magento 2
  • BigCommerce

This will automatically create the layers containing the Klaviyo product event data variables for each platform; Note that you will still need to set up your Klaviyo abandoned cart flow for this to work.

If you need a hand with this, please reach out to a developer on your team, or your Klaviyo support rep, as we (Emailify) can't provide any technical expertise or assist with any custom implementations of this more advanced templating feature in Klaviyo.