Uploading your emails to Klaviyo

Video Tutorial: Uploading your emails to Klaviyo

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) ​

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 ​

Video Tutorial: 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 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.

Adding an abandoned cart product feed to your Klaviyo emails ​

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

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; please note that you will still need to set up your Klaviyo abandoned cart flow for this to work.