In the Emailify export panel, select the Klaviyo option from the dropdown list, then paste in a valid Klaviyo private API key (with the Templates API Scopes permission set to Full Access), which can be generated from your Klaviyo account settings page (please ensure the Templates API scope has Write permissions).

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.

​
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 would like 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

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’ll 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 below 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:

Was this page helpful?

IterableLoops.so