How to add dynamic Klaviyo product feeds to custom HTML email designs in Figma using Emailify

Video Transcript

Today, I'm going to be showing you how to automatically add a dynamic product feed for your Klaviyo HTML email templates using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little resources icon up here. If you search for "Emailify" and click on the "Plugins" tab, select the Emailify result. You can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here. That's going to allow you to run it from your Figma plugins list for easy access later. I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then "Saved plugins," and click on Emailify. That's just going to run the Figma Plugin we saved a second ago.

I'm just going to create a brand new Emailify frame, so I'm just going to call this one "Klaviyo product feed example." So, I'll say Klaviyo product feed example and just click on "Add new Emailify container."

If you're new to the Figma plugin, it basically allows you to design emails in Figma that you can customize and then upload those to production-ready HTML, in this case, to the Klaviyo platform. I'm not going to be going through all of the design features today. I'm just going to be spinning up a quick email template to show you what it looks like. I'm going to add a few components here and make sure I've got my Klaviyo footer added as well. So, if you go to the "Footers" tab, scroll down to the Klaviyo option, click on that, and that will automatically prepopulate these links.

Now that we've got our Klaviyo footer added, I'm going to show you how to add the dynamic product grid that can be used with your Klaviyo templates. What you want to do is click on the "Ecom" tab in the Figma plugin, just click on "Ecom" up here. The first thing you'll see is this Klaviyo components list. We've got a couple of different options—three-column grid, two-column grid, and this one-column block. Today, I'm just going to keep it simple and go with this three-column block here. I'm just going to click on that, and you can see here it's automatically rendered the dynamic product feed to our page. I'm going to rearrange that in my email, just going to make that sit up here.

We've got a few different bits of code here. This has all been prepopulated, and the only thing you need to worry about is changing this feed name here. It says, "item equals feeds doyou Klaviyo product feed name here." What you need to do is basically go through these three things and swap out that name there. I'm going to show you how to do that now. If you go to your Klaviyo account and just go to your products, open up this content panel here, click on "Products," and you've hopefully already got a product source allocated. I've just got some demo products here at the moment. What you want to do once you've got your products linked up is just click on this "Manage product feeds" button up here. So, click on "Manage product feeds" in Klaviyo, and I don't have any available yet because I haven't created any. So, I'm going to create my first one by clicking on this "Create product feed" button up here. I'm just going to give it a name, so I'm going to call it "NEWEST_PRODUCTS." You have to use a combination of underscores, letters, and numbers. You can't use spaces, so just name it to whatever makes sense for you. I'm just going to call this one "new products." I'm going to click on this option down here where it says, what kind of product should the customers view, I'm just going to say "newest products." You can obviously change that to random products. I'm just going to make it newest products. This allows you to add filters if you want to add some filters where the category matches a certain category. I'm just going to leave that as default and click on the "Save product feed" button up here.

You can see here the product feed has been successfully saved in Klaviyo, and you can see my feed is now added over here. So, if I click on that feed, you can see here it's been saved. What we want to do is copy and paste the name that you just gave that product feed. I'm just going to highlight that "NEW_PRODUCTS" name and copy that to my clipboard, go back into Figma, and here, where I've got "item equals feeds.YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE", I'm just going to swap the "YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE" with my actual product name. I've got "NEW_PRODUCTS," which is my feed name. I'm just going to swap that in for all of these items down here. Each of these is now "feeds.NEW_PRODUCTS," which is what we just named the product feed in Klaviyo.

So, that's basically the main thing you need to do. To give you some context of what's happening here, it's saying we're going to look up this product feed, and where it says "index" and then a number, the index is basically the order or the product number in the feed that we're going to be loading up. So, "0" equals the first product, "1" is going to load up the second product, and "2" is going to load up the third product in the feed list of products. That's what that means.

Here we've got our image, so this is a placeholder image obviously. If we open up the HTML and mobile settings panel in Emailify, you can see that this has also been prepopulated. It's got the clickable link URL, which is going to the "item . URL" field. Then we've got the alt text set to the item's title, so that's also dynamic content. For the image source itself, we're overriding the image source. Instead of this placeholder that's going to get exported with the Emailify export, it's actually going to automatically add this "item.image_full_url" into the image source tag of your HTML. Those three things are prepopulated for all of the images here.

Obviously, we've got regular text layers here, which are just using the Figma text as you can see here, prepopulated with those variable names as well. That's going to load in your dynamic item title and your dynamic item price. Finally, we've got a button here, so this is just called "order now." You can obviously change that if you want to. But the important thing to know, again, if we click on the button layer and have a look in the HTML and mobile settings panel here, you can see that the clickable URL is also set to "item.url" It's the same link that we added to our image automatically by creating this component. So, of course, you can change this copy. If we just close off the settings panel here, we can call this something else. So, if you want to say "buy now" or "shop now," you can definitely do that as well. You just change that in your text area in Figma, and that'll automatically upload the button.

That's pretty much it. We're ready to go now. We can upload this to our Klaviyo account. What we need to do is basically go to our export HTML button in the Figma plugin. So, I'm going to click on "Export HTML," and I've already got the Klaviyo option selected. Yours might be automatically set to HTML email, so that's the default option. It's not platform-specific; it'll just download a zip file to your computer. But underneath the platform integrations category down here, we can basically scroll down to the Klaviyo option, click on that, and what you want to do is paste in your API key.

I've already got mine pasted in there; yours may not have an API key pasted in there yet. So, what you want to do is go to your API keys page; there's a link to it over here. Click on the API key link, and that will take you to this page here. If you haven't already done so, just click on the "Create private API key" button, and you want to make a new API key. You can call it "Emailify." Then what you want to do is copy that key to your clipboard. So, just click on this copy button and paste that into this field here. You just want to paste that in like that.

The next thing you want to do is make sure, for this case anyway when you're using the dynamic product grid, you'll need to make sure that the "editable content" toggle is enabled. I'm going to show you why that is in a moment. If you are using this dynamic product feed as of recording this video, it's essential that you've got this editable content field toggled because we need to do a couple more steps in Klaviyo to make this custom product grid actually work in the template itself.

So, go ahead and click on "editable content," and then you also probably want to turn on this "force the padding added by Klaviyo new Editor to be zero." I'll show you what that looks like in a second. Long story short is that the new Klaviyo editor automatically adds a bunch of weird default padding around blocks and text items. So, this kind of helps to mitigate it in any email clients that aren't Outlook, and I'll show you how to do that further in a second as well.

Now that we're all set to go, you can basically add a subject line. This is going to prepopulate the title tag in your HTML. It's not going to prepopulate this in Klaviyo, but it will add it to your title tag. You can also add a preheader text, so you can just call this "preheader text" here and populate that with whatever you want.

Now that we've gone through all those steps, just go ahead and finally click on the "upload to Klaviyo" button. That's going to automatically upload all of your images, generate the production-ready HTML, and upload all of that into Klaviyo.

The template has been uploaded; you can click on the Klaviyo templates link to view that. So, we're going to open that up now. Just click on the Klaviyo templates link, and that's going to open up the list of templates. You can see here that our Klaviyo product feed example, which is what we called our frame in Figma, has been uploaded to the templates list in Klaviyo. So, we can open that up, and you can see here it's added in the template. I'm just going to cancel out of that for a second.

The way we can use this template is just by going to campaigns. Once you've loaded the campaigns page, just go ahead and click on the "create campaign" button up in the top right here. You can call that whatever you like and make sure it's set to the type of email. Then click on "Save and continue." What you want to do is choose your recipients, so choose a segment that you've already got as a list and make sure that's turned on. I'm just going to turn off this option as well; if I want to send myself a test, I can do that in a second. Then just go ahead and click on "continue to content."

Once this page loads, you want to make sure that you add a subject line here because the subject line doesn't get carried in from the API. Once you've set your subject line, just go ahead and click on the drag and drop icon here. So, click on "drag and drop." Once that loads up, it'll show you a template library option. But you actually want to click on this "saved templates" tab. This is going to load up your custom templates, like the one we just uploaded. So, we've got our Klaviyo product feed example template that we just uploaded here. What you want to do is click on that one, and that's going to allow you to load that preview up again. These little lines here are just revealing editable content areas, so don't worry about those if you're wondering why it's looking that way. Just go ahead and click on the "use template" button down here. Once you've done that, you need to do one extra step, which is clicking on this "save" button here. So, before you go back to content, just go ahead and click on this "save" button in the top right, and that will just re-trigger the template to save in Klaviyo. That's actually what's going to make it editable. If you don't click on that "save" button for some reason, it doesn't trigger it as an editable email.

Once you've clicked save, go ahead and click on "back to content." That'll take you back to your campaign page. What you want to do is now click on the "edit email" button. Now you can click on "edit email," and this will load up this page. It always seems to say that something went wrong loading the template the first time. Just go ahead and click on the "reload" button on your browser, as it suggests. Once that loads up, you can see that we've got our template in here. We've got our editable regions; we've got our dynamic product grid down here, and we've got our footer that we added for Klaviyo before as well. If we click on the "preview and test" button up here, you can see that when this loads up, you'll notice that the content itself from the dynamic product feed isn't showing up. That's because Klaviyo requires doing this extra weird couple of steps that we're going to go through right now. I'll show you how to get this data actually rendering into our product grid here.

Just go ahead and click on "Done" for now, and then if you go back to your email editing area here, what you want to do is now go to this product icon down here. So underneath the block section where it says "product," you just want to drag and drop that block into any editable region in your template. So I'm just going to add it to this row here, just as a spot to add it in. And then it's going to load up this "configure product block" option. So what you want to do is make sure that you click on that. And then over here on the left, you want to make sure that the product feed is selected to be the same as what you specified in Figma. So you'll remember that we had our "new_products" product feed in Figma. So you can see here we've got "feeds.do.new_products" as the name. And so you want to make sure that yours is selected to match that in here. So just make sure that's all good to go. And then once you've done that, the next step you just have to do is go over to this "display options" tab. So we don't want this Klaviyo product block to show up, obviously. So what we need to do is go to the "display options" tab here, click on the "create logic" link next to this "show/hide logic" heading. And in the logic input field, you just want to type the word "false", then click on "Save changes" and this will ensure that the conditional logic will always be false, and it will never show this block in your HTML email sends.

The reason we had to do that is because for some reason, using the custom HTML template grid here for our Dynamic product grid, it doesn't allow us to actually access the dynamic data from the feed until we've actually added the Klaviyo version of the product block component first and point that to the product data source that we need to access here. So it's really weird. I wish it wasn't the case, but it seems that you do have to add this product block here first somewhere in your template, preferably above this product grid here, which seems to allow you to access the data in the template first that we can then call down here that we've already got set up in our custom HTML here with these little tags and dynamic content rendering snippets here.

Now that we've got that added in, and we've got the visibility set to have false logic, if we now click on the 'preview and test' button one more time, this time when the template loads up in our preview, you can see here that the dynamic content is actually being loaded in. So, instead of it just being blank as it was a minute ago before we added the Klaviyo block, you can see here that it's now pulling in the dynamic image thumbnails, it's pulling in the dynamic template names, and the products in the template data that I've got, or the product data rather that I've got, don't actually have any prices, so that's why it's rendering as 'none.' Your product data will obviously be much better, hopefully, than mine, which is just placeholder content that I loaded in using the Klaviyo developer tool to load in some placeholder content just to show you this tutorial.

But yours will obviously show up a price there, and the title and the real thumbnail image, and these are clickable because we had those links assigned. You can see that they're clickable, same with the 'shop now' buttons. Those will automatically open the real item URL, same with the images when they're actually loaded in with proper data. But you can see that the content is now being pulled in as we'd expect.

That's really good. So if we close that off and click 'Done,' you can see here that we've got our, obviously, the placeholder content here is different from the real content that's going to get loaded. But clicking on the 'preview' button will allow you to test that out, and you should probably send a test email to yourself to validate that as well.

That's basically it. I just wanted to run you through all of those steps. I'm mindful that it's a really arduous process to actually go through that and set it up just to be able to get this working, but it does seem to be the case that that's required.

The other thing that I mentioned before is that you also will probably need to go through these blocks here with the padding that I mentioned. So for some reason, the new Klaviyo editor automatically adds nine pixels of top and bottom padding and 18 pixels of left and right padding to any editable content blocks, text blocks in your email. So you probably need to go through those and just quickly click on those, set these to zero, so just reset them. I don't know why these are set to 9 and 18 pixels by default. This is just how the Klaviyo editor works when you load in a custom template with editable fields.

Just make sure you go through any of the editable content fields in your design and set those to zero, and that'll revert it back to what you'd expect them to look like from your original template in Figma.

Tthat's basically what it looks like. So I hope that's been helpful if you've been wondering how to add dynamic product feeds from Klaviyo into your custom HTML email templates. I've had a lot of questions about this for a while, so I really wanted to do a detailed tutorial just to show you how to do this and also show how you can get that basic structure set up in Emailify with one click, just rendering out those components. You can obviously customize the design of these. You can change the font size, you can change the colors, you can change the size of these image tags, image blocks, of course, to fit your own aspect ratio, things like that. And if you have additional content, so if you have discounted prices or things like that, you can, of course, add more content as long as you have access to that data. So you might have a different field called 'discount field' or 'discount price' or something like that. These aren't real fields, I'm just making them up, but your product feed may have additional data or different data that you want to display.

It's just a matter of tracking that down, finding it, and applying it to the appropriate layer or the appropriate field. So, of course, most of that can be accessed through the HTML and mobile settings panel. So if you're ever unsure of where some of this data lives, it's probably going to be in there. If you can't see it in your design, so again, just click on your layer, the button, you can add the clickable link there, images, same thing, clickable link URLs, alt text, overwriting the image source, so that's what the actual image is going to be loaded from with this dynamic content, as we can see in our preview a second ago. So that's what that's getting loaded in as, getting called in from this field here.

And the final thing that I'm just going to show you is if you do want to add multiple rows, you can just go ahead and copy and paste your original row and all you need to do is change this index here. So you've obviously got index 0, 1, and 2, so you would go ahead and change that to index 0, 3, 4, and 5. And that would basically load in the fourth, fifth, and sixth products in your product feed data. And that allows you to keep the original row as its own component, which means you can do cool stuff like make changes to multiple rows at once using that instance and having those load in the different product datas from your feed.

We'll leave it there, finally, and thank you as always for watching. We'll be back soon with more Figma tutorials like this one in the weeks and months ahead.