← Back to Emailify Video Tutorials

What this video covers

This tutorial shows how to build a custom HTML email in Figma with Emailify, add a Klaviyo dynamic product grid, and upload the template to Klaviyo. It also explains the extra Klaviyo setup needed to make the feed data render in the template preview and in campaigns.

Things you'll need

• A Figma file with the Emailify plugin installed.
• A Klaviyo account with access to Products and API keys.

Steps

1. Open your Figma file, run the Emailify plugin, and create a new Emailify container.
2. Add a Klaviyo footer from the Footers tab, then switch to the Ecom tab and insert a Klaviyo product grid component.
3. Create a product feed in Klaviyo under Products and Manage product feeds, then copy the feed name into the Emailify component fields where it says feeds.YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE.
4. In Emailify’s HTML and mobile settings, confirm the product links, alt text, and image source are set to the dynamic item fields, then export HTML with the Klaviyo integration selected and paste in your API key.
5. Enable editable content and, if needed, force Klaviyo editor padding to zero, then upload the template to Klaviyo.
6. In Klaviyo, open the uploaded template from Saved templates, click Use template, save it, then return to the campaign editor.
7. To make the dynamic feed render, add a Klaviyo product block in an editable region, set it to the same product feed, and set its show/hide logic to false before previewing again.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Uploading your emails to Klaviyo
• Next: Translate HTML email designs with localization in Figma
• Open Emailify in the Figma Community