Creating a promotional email template with Kombai

This guide covers a real-world example of how Kombai can be used to create a promotional email template for Klaviyo.

It includes each step from loading the design in Kombai to editing the campaign in Klaviyo.

The template used in the guide contains:

• Brand-specific fonts.
• Two design versions - one for desktop and one for mobile.
• Klaviyo-editable header & footer.
• Klaviyo-editable texts for coupons & text variables.

For those who want to watch, here's the step-by-step video:

Load the design

Here's how to load the design in the Kombai’s plugin:

1. Open the Figma design.
2. Go to Resources -> Plugins.
3. Search Kombai and select Kombai - HTML email code from ANY design in a click.
4. Select the section of the designs to load it in Kombai.

Mark elements & sections as Klaviyo-editable

Once the design is loaded in Kombai, follow the steps below to mark Klaviyo-editable elements & sections in the design:

Mark coupons & text variables as Klaviyo-editable

To mark coupons & text variables as Klaviyo-editable:

1. Go to the three dots menu, and select Mark Elements to Edit in ESP.
2. In the Texts section, mark all the Figma layers that belong to coupon codes or text variables.
3. Now, choose Mobile Design from the dropdown in the Viewing Design Settings for.
4. Again, in the Texts section, mark all the Figma layers that belong to coupon codes or text variables to make them editable for the mobile version of the design.
5. Click Confirm.

Mark header & footer as Klaviyo-editable

To mark header & footer sections as Klaviyo-editable:

1. In the three dots menu, select Mark Sections to replace in ESP.
2. Select the header & footer sections.
3. Now, choose Mobile Design from the dropdown in the Viewing Design Settings for.
4. Again, select the header & footer sections to make them editable for the mobile version of the design.
5. Click Confirm.

Export the code to Klaviyo

Now all the Klaviyo-replaceable elements & sections are marked and custom font is added. It is time to export the template and create an automated campaign for Klaviyo. Here's how to do it:

1. Hover on Export Code, and go to Export to ESP -> Klaviyo.

2. Select Upload template via integration.

3. Name the template.

4. Select Also create a template in draft state in Klaviyo.

5. Name the campaign, add campaign audience, and click Export to Klaviyo.

Edit the template in Klaviyo

This section will cover how to edit a Kombai-generated template directly in Klaviyo.

Make sure custom fonts are added to Klaviyo

Importing the custom fonts used in the design is an essential preliminary step in loading the template in Klaviyo. Follow the steps below to add the custom font to Klaviyo:

1. Open the Klaviyo dashboard.
2. In the left sidebar, go to Content -> Images & brand -> Fonts.
3. Select the XYZ font under the Font name dropdown in the Google Fonts section.
4. Select a web safe font under Fallback font and click Add Font.

Load the template in Klaviyo

Follow the steps below to open the Kombai-uploaded campaign in Klaviyo’s drag-and-drop editor:

1. Open the recently created campaign in Klaviyo and click Continue to Content below.
2. Click Edit email on the top right of the Campaign Content section.
3. Click the Save button on the top of the email template editor.
4. Click Back to Content after saving the template.
5. Again, click Edit email on the top right of the Campaign Content section.

Edit the coupons & text variables

1. Select the text block that you have marked as editable.

2. Go to the content section in the left sidebar.

3. Edit the text.

4. Repeat steps 1-3 for all Klaviyo-editable text.

Replace default header & footer with universal header & footer in Klaviyo

Now comes the final step of our template editing process - replacing the default header & footer of the design with a universal header & footer in Klaviyo: