How to create a Klaviyo abandoned cart flow custom HTML email template in Figma using Emailify

Video Transcript

Today, I'm going to be showing you a step-by-step tutorial on how to design and implement custom HTML abandoned cart emails in Klaviyo using the Emailify Figma plugin.

To get started, all we need to do is go to a new Figma file and open up the resources panel at the top. If you click on the resources icon and search for Emailify, under the plugins tab, if you click on the Emailify item, you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on the save icon to bookmark it to your plugins list for easy access later.

I've already clicked on the save icon, so I'm just going to go to my Figma canvas, right-click anywhere, go down to plugins, then go down to saved plugins, and click on Emailify. That's just going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which you can then automatically export to production-ready code with one click from the Figma plugin.

To get started, I'm just going to give this email a name, and I'm going to call it "Klaviyo Abandoned Cart Email Template." Then, I'm just going to click on the "Add New Emailify Container" button. I'm not going to be going super deep on the design features in the Figma plugin today. If you're interested in designing and customizing HTML emails in Figma using Emailify, there are a couple of other tutorials on the YouTube channel that you can check out, and the documentation site is really good for that as well.

But for today, I'm just going to be creating a really basic email with a little bit of content and, most importantly, the abandoned cart template that we're going to be creating in a moment. What I'm going to do is go over to my "Ecom" tab in the Figma plugin. You can see under the first section here, under the Klaviyo section, we've got a few different templates we can use. These first ones are Klaviyo dynamic product feeds, so we're not going to be using those today. If you scroll down a little bit further, you'll notice that we get to these Klaviyo abandoned cart items templates.

You can see we've got a few in here. We've got one for Shopify, which is probably going to be the most popular one, and then we've got one for WooCommerce, Magento V1, V2, and BigCommerce. You can select which one is relevant to you. For today, I'm going to be using the Shopify one, so I'm just going to click on the Klaviyo Abandoned Cart Items Shopify template. That's just going to add all of these layers to our email automatically.

You can see here that we've got a bunch of code that's been added. This is basically going to check if your abandoned cart has items in it. If it has some items, it's going to show this heading here, and then it's going to try and loop through all those items and display the product information here. But if the cart is empty, you'll get this empty message here. This is all customizable; you can change this. If you want to update the text, you can obviously change that to say, "Did you leave something behind?" or something like that. This is totally up to you, so you can basically customize this content as you would the rest of the email, and that's all going to look just fine.

Again, if you don't even want an empty message, you can just get rid of that entirely, and that’s totally fine. You can basically just remove that, and it won't show up. I'm just going to leave that in there for now to keep things simple. You'll notice that there are a few different bits of copy here. We’ve got the product title, the price that's going to be displayed, the quantity, and also the image. The image is being loaded through the settings panel in the Figma plugin. If you click on that image layer and click on the settings panel, you'll notice that the information, link, and ALT text have been pre-populated with the dynamic tags for Klaviyo.

I'm just going to leave all of that as is. Again, you can customize this if you want to make the image a little bit bigger or a little bit smaller. If you want to customize this text, you can totally do that in Figma, but for today, I'm just going to be keeping it really simple, along with this button down here. I'm not going to customize that either, but if you check out the button settings, that's also going to take you to the checkout URL. Of course, you can customize this as well; you can change the copy on there and obviously change the styles as you like.

The last thing I'm going to do before we connect this to our Klaviyo account is just go to the footer tab and scroll down to the letter K. We're going to find the Klaviyo footer. Go ahead and click on the Klaviyo footer, and again, that's going to pre-populate these links for us. We’ve got our unsubscribe link; you can see here that's pre-populated: manage preferences, view in browser, and the address as well. Again, you can change this design to whatever you like. If you want to update that style or content, you can definitely do that, but again, I'm just going to keep it really simple for today.

You can also preview the HTML just by clicking on the preview button at the top here. You can see this is the mobile preview and the desktop preview. You'll notice that the image isn't being loaded because, again, this is loading in the dynamic image URL. This is going to get swapped out in Klaviyo once we hook this up to our abandoned cart or other type of cart email. Again, same with this product data here. I'm essentially going to leave all that as is, and what we're going to do now is export this HTML into Klaviyo.

I'm going to go ahead and click on the export HTML button. I'm going to change the default HTML email option and scroll down to the Klaviyo option. Just click on Klaviyo. What you want to do then is click on this API key link. If you click on that API key link, that's going to open up your Klaviyo account if you're logged in. What you want to do is click on the "Create Private API Key" button here. Just go ahead and click on that, and once your "Create Private API Key" loads up, you can just give it a name. I'm just going to call this "Emailify Klaviyo Key." You can name it whatever you like.

Then we're going to click on the "Custom Key" radio option down here and just scroll all the way down to "Templates." You want to change that one to have read-write access. All the other ones can have no access. All we want to do is change the read-write access column for templates to be selected at that radio button. Once you've selected templates to have read-write access, go ahead and click on the create button. That's going to automatically create your new Klaviyo private key. You only get one chance to copy this, so I'd save this in a password manager or somewhere secure for future reference as well.

Just go ahead and click on the little copy icon here, and then once it says it's copied to your clipboard, just go back into Figma. We now want to paste that key into this input field here. I'm just going to paste that in, and now you can see that the upload button is available to us. I'm also going to leave the editable content toggle turned off. There are a bunch of reasons for that. If you click on the content link here, you'll get a better understanding as to why you would want to turn that off in this particular case.

But basically, the long story short is the editor will add all this weird extra padding and things like that, so it's just a bit of a headache to tidy up. I would just leave that editable toggle off for our abandoned cart email. Then you can basically give this a subject line and preheader text. I'm just going to leave this blank for now just for simplicity, but you can populate those as you like. Once you've set all that up, just go ahead and click on the "Upload to Klaviyo" button. That's going to automatically generate the HTML, upload all the images, and automatically upload our template to our Klaviyo templates page in our templates account.

If you click on that Klaviyo templates link, you will see all of the templates there, including the one that we just uploaded. If I click on that link now, this is going to open up our Klaviyo templates list. You can see at the very top here we've got our Klaviyo Abandoned Cart Email Template. If we open that up and click on preview, you can see that our HTML has just been automatically uploaded from Figma into Klaviyo. That’s the first step. We've got our abandoned cart email template in the Klaviyo templates now.

The next thing we need to do is set up the flow itself. The abandoned cart flow can be set up under this flows panel on the left-hand side in Klaviyo. If you click on the flows menu item where my mouse is on the left right now, just click on flows. Once that loads up, you just want to go ahead and click on the "Create Flow" button in the top right-hand side. It's going to give you a bunch of presets. There might be a bunch of preset ones. You can see here there are a bunch of Shopify presets. You can search for different presets if you want to use one of those; that’s perfectly fine.

But to keep this really simple, to hopefully make it clear how it works, I'm just going to start from scratch and click on the "Build Your Own" button in the top right here. I'm just going to call this one "Emailify Abandoned Cart Flow," and I'm just going to leave that as the name. Again, I'm going to click on the "Create Manually" one. I'm not going to create it with AI; I'm just going to click "Create Manually" and go to the Builder.

Once the new flow loads up, you'll see something that looks like this, and you've got a bunch of different options. For this tutorial, it can also be used for other types of triggers. If you wanted to do a different one, like added to cart or something like that, you can use a different trigger. But for today, we're just going to be focusing on abandoned carts. With that being said, I'm going to click on the "Checkout Started" one. You can see under "Most Popular" here, we've got the "Checkout Started" trigger. I'm going to click on that, and this is basically going to fire whenever somebody starts a checkout process in Shopify, with some other metrics also included.

We can start stringing these together in a moment. I'm going to use that as the trigger. I’m going to create the trigger of "Checkout Started," and then I'm just going to go down to the bottom here and click on the "Save" button. I'm just going to click "Save," then confirm and save, and that's going to lock in that trigger as the trigger of when someone starts a checkout. That's kind of the beginning of our trigger.

What we want to do now is add a time delay item. If you go on the left-hand side here, go under "Timing," and drag and drop the time delay item underneath there. We're just going to drag and drop that onto the canvas, and then we want to click on that and add a time delay. Normally, what you want to do is either add like a day, so you could do one day or something like a few hours, so you could set a 4-hour delay. I'll put that in there and click on "Save." Once that finishes saving, you can see that it's telling us the changes have been saved.

We've now set up the trigger and set a timer delay for 4 hours. The final step we're going to add in this particular flow is then to trigger an email. We're going to drag and drop this email item in the top left into the bottom of our existing flow down here, underneath the delay, and that's going to add the email step to our flow. Basically, someone's going to start a checkout; if they leave the checkout or don't check out after 4 hours, it's going to send them this email.

We're now going to click on the email flow item, and what we're going to do is give this a name. You can call this "Abandoned Cart Email Number One." If you're going to have multiple triggers or multiple delays, you could name these with numbers at the end; that’s pretty common. Then you can give it a subject line. You might say something like, "Did you leave something behind?" That might be your subject line. You can call it whatever you like.

Then basically, you want to go down here where it says "Template" and click on "Select Template." Once that template page loads up, we want to go to the "Saved Templates" tab. Go ahead and click on "Saved Templates," and underneath this list, you’ll see our brand new one that we created called "Klaviyo Abandoned Cart Email Template" at the very top. We're just going to click on that one, and you can see we've got a preview of the template. This is the same template we just uploaded a moment ago.

I’m going to click on "Use Template," and this is going to load up a new page with the code on it. Once this template view loads up, you can see all of our HTML code that was exported from the Emailify Figma plugin is in here. What we can do is now preview this with real data by going to the "Preview Email" button on the right-hand side here and clicking on that. Then you'll notice at the top here we can select a recent event to preview with.

What that means is we can select a recent event from the real e-commerce site. In this case, this is me doing a checkout a few hours ago. I’ve got this checkout event where I started checking out and then closed the window and didn’t finish my checkout. I've got a couple of items in my cart, and we can use this real data to populate the dynamic content that we created in our template.

What you can do is just click on whichever event you want to preview it with. Then go down here and say how you would like to preview the email. Just click on "Show Directly in Klaviyo." You can also send it as a test email to yourself if you prefer to do that. But for today, I'm just going to click on "Show Directly in Klaviyo." Click on "Preview" now, and that's going to automatically pre-populate that content.

You can see here this is real HTML content, and it's being populated with the real data from that real checkout event. This is really cool because it means we can actually test out if these links are working. We can see that the product names and pricing and the quantity in the cart are correct. We've got our return to cart button, so if we click on that, that'll actually return us to the real cart for this real event. It’s just a really nice way of seeing what the email is going to look like when that abandoned cart trigger really gets fired and what a real customer is going to see.

This is exactly what you want to see and make sure that the data is coming through exactly how you'd expect. Again, this is working with a Shopify store, so if you're using a different platform like WooCommerce, you would use the WooCommerce template in Figma that we saw in our templates over here. You've got the Ecom tab, and down here, you've got the Shopify version, which we've used. But if you're using a different platform like WooCommerce and you're using that with Klaviyo, the variable names here are going to be a bit different. You just want to make sure you've got the correct one.

You can obviously modify these if you want to change it. If you don't have dollars, maybe you want to change this to a pound symbol or something like that, but you can basically change that as needed. That’s looking really good. This is basically the pre-populated real data content being injected into our layers here, which again were just preview placeholders at the time. These fields are now being swapped out with real content based on the real Klaviyo links and data from our checkout event.

I'm just going to close off that preview now that we know it’s looking good, and we're going to click on the save button. It's important to click on the save button again when you're done, so just go ahead and click on that X. Then we're going to click on the "Done" button in the top right-hand corner. That's going to take us back to our flow. You can see we've got the flow here, and essentially what you want to do is make sure that all the conditions are exactly what you want.

If you go back to the trigger up here, you can see that we don’t have any filters applied at the moment. You can add filters to this trigger to say, "Hey, we only want this to fire when a certain category, a certain collection, a certain discount code, or anything is used." You can basically dive really deep into the conditions of when this will fire, or you can just leave it as a very generic thing. When anyone checks out, it will trigger, but you probably want to enhance the trigger filters to make it only fire at certain points.

That's kind of outside of the scope of this tutorial. You should go through and consider what filters you want to be applying for your audience or your products. We just covered how to add a checkout event, how to add the delay, and how to add the email template. That’s the most important part that you need to know. Once you're ready to go, all you need to do to make it live is just click on the "Review" and "Turn On" button in the top right here. You want to change this flow status from draft to live, so just click on "Live."

Once you're happy with that, just go ahead and click on "Save." That’s going to make the flow status live. I'm just going to leave that as draft for now; I don’t want to make this live, so I'm just going to set it back to draft. But that’s basically it. I hope that's helpful. If you've been wondering how to create abandoned cart emails that are custom and design those in Figma to then export into Klaviyo and use in any kind of cart flow or abandoned cart trigger in Klaviyo, you can experiment with the kinds of flows that you want to design.

This is the most basic one you could possibly come up with, but again, I just wanted to simplify it to show you exactly how it works and then how to set that custom HTML template using the template that we just uploaded from Emailify in Figma. We'll leave it there for today. This has been a really highly requested video, so hopefully that's helpful. If you've been wondering how to create custom HTML templates for Klaviyo abandoned carts or other kinds of dynamic cart triggers in your Klaviyo emails, hopefully, this gives you a little bit of a head start.

If you do need more advanced help, I’d highly recommend either getting in touch with your Klaviyo support rep, or if you've got a dedicated developer on your team, hopefully, you can reach out to them if you want to tweak any of this content here to make it a bit more personalized. But this should at least give you the base or starter component for you to work from and customize to get a kind of minimum version working for your abandoned cart flow custom templates in Klaviyo.

We'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.