How to Design Optimal Emails in Klaviyo 2023 | Figma + Klaviyo

in this video I'm going to show you how to design High converting email templates for your Shopify brand within clavio even if you have the artistic IQ of a rock like like trust me I'm the right person to learn this from because my agency only does email and SMS marketing for Shopify Brands and we spit out dozens and dozens of designs like these on a daily and if you want to see the type of difference good design and good copy can make to your email conversions check out this this is a brand that we onboarded about a week ago we were able to instantly triple their returns with emails in our first campaign without a crazy sale or anything like that let's dive into it so this is a template that I was able to put together in around 10 minutes for a brand called akko which is a coffee alternative brand that's like containing nootropics mushrooms and that kind of stuff so let me show you how this design is done so with every email there's certain components that can never be missed right obviously you want to have the logo at the top of the email you want to have some sort of banner image you want to have call to actions right the rest like these unique selling point comparison tables and the reviews this is all more so just like stuff that you can kind of pick and choose to add whenever you want into your email templates and I'm just going to show you how to build all of them in this video by the way if you're a seven figure brand watching this you should definitely not be doing your email marketing yourself because the thing that's going to actually get you to eight figures or in the very high seven figures is going to be acquisition right so if you're a Founder watching this you should should Outsource your attention needs to us booking a call first link in the description okay now let's actually do this so first of all to get the logo you essentially want to create it inside of figma main reason being is because with clavio whenever you try to put a logo block inside of clayview if you open the email on your mobile what's going to happen is not only is it not going to be optimized for dark mode but also it's going to get stretched right so that's why if you open emails from certain brands their logo seems absolutely huge on mobile and it's because that's clavio's native way of optimizing it so the easiest way for you to get around this is an is essentially to design this in figma so what we normally do is we put like a rectangular block at the top and then add the logo as like a PNG file okay so once you do this the rest of the design you kind of set the tone for it oh by the way with the frame always set the width to 1000 pixels wide reason being is because too wide is going to make the file size too big too small then it's gonna kind of look a bit stretched right so generally speaking best practice says we should be between 750 pixels all the way up to around one point one thousand two hundred we like to stick around the 1000 Mark for all of our templates across the board once this is done I like to always add branded color swatches so in this case we're doing a sample for this brand called akker and how you get the color swatches for a brand if you don't have their brand guidelines is by going on the website and using this tool called color pick eyedropper and what that will allow you to do is essentially get the hex code for all of the colors generally speaking we like to have no more than three colors at a time this is to keep the email template looking pretty on brand and not too kind of like busy with Too Many Colors unless kind of like rainbows and a lot of color variation is specialized to your brand I would recommend sticking with around two or three colors per email so you can see the color swatches I've identified is basically this beigey color this orange color and a black right so what we're going to do is we're going to design now the most important part of the email which is actually going to be the banner so with the banner it's really important that you pick the right creatives in this case I've just chosen to use their hero image for their product page because it actually fits quite well because generally speaking with banners you want to convey a couple things right you want to convey what product you're selling and also try to highlight a few unique selling points of the product without actually explicitly saying it with words so in this case obviously with it being a coffee alternative you know we want to highlight the actual product and it clearly says a coffee alternative and then we also showcase the preparation method which is basically just a bit of water in a glass you spoon it in you stir it and boom preparation is done you want to sell as much of the product as possible without actually using words because the amount of characters you can use in the banner is very limited what do I mean by this well when I was doing the sample copy for this brand where I basically took this from is essentially the home page right where it says the world's first nootropic coffee alternative now the problem with putting that in there is you can see that it's it's really long right so essentially with the banner you don't want to clog it up with a lot of words you want to reduce character count by as much as possible which is why I was able to shorten it to just world's first nootropic coffee alternative right it conveys the exact same message without using a ton of words once you have this the next most important thing that you need to be inserting is the call to action so this is something in email marketing where we say we always are designing above the fold meaning whenever someone opens the email within their mobile phone you want them to be able to see a banner and also the call to action without needing to scroll right that's why we design everything make it kind of more mobile friendly that's why we always have the CTA fairly high up in the email template to make it very easy easily visible to everyone now with ctas it's really important that it mimics the style of buttons on the actual website because you want to train people to know exactly where to click because by them joining your list they've already been on your website so you don't want to have any discrepancies between your email designs and your website so you can see on akka's website they use kind of pill-shaped buttons and I'm going to show you exactly how to replicate something like that so what you're going to do is you're going to first of all create a rectangle like this right and then what you're going to do is go to the right hand side in figma where there's this like Corner radius symbol and you're going to set it to whatever would make it kind of like completely round or if it's just like rectangles with rounded edges then you can kind of drop this number to let's say a 10 and you can see the edges now suddenly become round but if you increase the number to let's say 100 or whatever then you can see it instantly it becomes a pill shaped button right and once this is created you want to kind of align it to somewhere in the center so initially I put it here but again this Banner currently lacks a little bit of description right so what we're going to do is we're going to just add like a one-liner highlighting what the product is about and you can basically drag and drop something like this this is again just a rewording of what was on the website already so once this is done you can kind of align it like this and boom now you have a banner now from here this is where creativity really kind of starts because generally speaking logo banner and then CTA is fairly standard across all email designs in terms of what you can add to the other sections there's only really several routes you can go down right you can add like a discount block to feature some sort of discount code you can add product comparisons unique selling points you can add long form copy reviews user generated content Authority blocks like featured in Forbes featured in glamor that kind of stuff you know what I mean like basically logos of Publications but at the end of the day with email designs there's only so many block variations that you can actually add right so I'm going to show you exactly what the most important and the most common ones are and from there you can basically go wild so the one that we're gonna focus on today is basically this comparison table because it's already on their website all nicely laid out so you can see they have this uh comparison table right down at the bottom which outlines the main difference between the traditional competitor which is coffee right so adding this in is super easy if you're a consumable brand this is very easy to replicate so you literally just need to go into canva or basically any software that makes design really easy you can even do this in figma and the beauty of creating elements like this is once this graphic is created you could literally reuse it over and over again right so it's basically a bunch of shapes with a few lines separating down the middle aligning the text to a certain margin on the box adding some text signs and you're basically done now how this applies if you're not a consumable brand is through for example like price comparison so if you're a fashion brand let's say you can compare the type of fabric that you use in your apparel versus your competitors so let's say you use 100 cotton or like cashmere or silk whereas your competitors are using polyester elasta thing that type of stuff that's a really good thing to insert as a comparison table you can also compare price points so for example you can say that your t-shirts costs 30 bucks where someone else's cost like 60 right that kind of stuff now it's really important when you're creating a piece of graphic like this is you're sticking to the facts right because if you stick to the facts then your legal exposure is very very limited so with comparison tables like this particularly when you're comparing against like another brand you really really need to make sure that you're casting out all of your opinions right so for example you can't say something like this brand equals good this brand equals bad that's that's kind of like subjective in order to create something like this you literally just create like a sub heading in here boom and then you essentially would just be able to drag this graphic right over here now you might be wondering boy on this email looks like super weird and it's literally just because of the background color so what you're going to do is you're going to set the background color on the frame entirely by going over to by clicking the frame and then going over to fill and then you just select the color that was basically in one of the swatches so you can see that this email is already shaping up quite nicely now let's talk about the reviews because the reviews as well kind of like you need a bit more graphical design skills in terms of like aligning images and that kind of stuff so there's several ways that you can actually present reviews number one way is basically to just take the review itself right add some stars to it and if you want to have multiple reviews it's super easy all you got to do is drag this out Center the text boom you got that and then you just separated by stars right so what you would do is you would go in here select all the stars tie it over to this and then you would essentially just be able to duplicate the reviews like so something like this right that's one way of presenting reviews another way is basically incorporating ugc e so in this case what we like to do with ugc Arrangements is we like to put it kind of side by side so you would essentially take a review add some stars and then put the ugc content right here tie it to the actual review itself and add a subheading that says something like you know our customers agree right so this is pretty easy to do from a review standpoint you can also even use GIFs so for example if you have a wide collection of user generated content what you could do is essentially just design a gif where it just shows all of the different people that consumes your product insert into here obviously when you actually upload it onto clavio you need to make sure to upload it as like a separate image block because what happens is if you try to render the entire email as a gif what's going to happen is it's going to make the size really big because it's going to treat the rest of the design as kind of like quote unquote moving blocks also once you add your review you gotta remember to create more than one CTA button it's really important that you do this because what happens is if you're on mobile and someone's kind of scrolling on the email the last thing you want happen is basically they need to scroll all the way up to the bottom not see a button I need to scroll all the way to the top to find where to click right so that's going to help you increase your click-through rate significantly if you just put more buttons in that email design now this design doesn't look bad right so what you're going to do is if you're once you're satisfied with the design you're going to go to slices you're going to go into figma and hit slice and you're going to create different slices so for example when you're doing this let's say you're promoting multiple products in this email what you can do is let's say your CR let's say you're promoting multiple products within the same email what you're going to want to do is have multiple call to action links linking to the different product pages that you're promoting right so this is where slicing becomes really really useful so what you do with slicing is basically you can do this highlight this section of the email and if you were to go to slice one let's say you hit export it only exports like this section of the email and you can see it's highlighted by the dashed lines right this way when you upload it into clavio you can just upload it a separate image blocks and then you can set the URL to point to wherever you want it to go so now that you're happy with the design and you've put them into various slices I'm going to show you exactly how to export this the correct way into clavio and not rescue Landing into spam so what you're going to do is first of all you're going to go into the slices and you're going to export them when you click export slice you're going to be doing it in PNG file so in this case I'm just going to name it akka demo one so now what you're going to do is you're going to go to a website called tinypng or tiny jpeg it just depends on if you export it in PNG or JPEG and you're gonna upload the pngs that you just did now you can see it's reduced the size from 600 kilobytes and almost one megabyte down to 200 and 300 kilobytes much smaller much faster to load you're going to hit download all and it's going to come into a little zip file you're going to unzip it into a little zip folder right here once you're in clavio you're obviously going to need to select this recipient segment you're going to continue to content and then you're going to put in the subject line on a preview text once this is done you're going to click the drag and drop Builder and in terms of templates I would go over to basic and then just choose the most basic template basically because this doesn't really matter so now once you're in here what you're going to do is you're going to go ahead and delete the text block and then from here you're going to upload your images click upload attach and you're going to upload slice one first and then you're gonna hit duplicate and then you're going to upload the second slice what you'll notice is when you're uploading the slices you can see that this is really like annoying border that's like white between the slices so what you're going to do is this is to do with padding right so you're going to click on one of the images and then you're going to scroll all the way to the bottom and you're gonna delete you're gonna set the padding to zero so this is set to zero toggle off the padding and then toggle off the padding here as well so once this is done you can see now it fills the width you're going to do the exact same on the second slice toggle the padding off remove the bottom and left and right padding so once this is done you can see now you have like a Flawless pretty nice looking email design and you're going to insert the link addresses in here and you're also going to describe the alt text so for example here it would be like akka uh coffee alternative and then here it would be like something along the lines of uh reviews our customers love us and then unique cell USB unique selling points something like that right and then link address wise you just want to point it to whatever product page you want to drive the traffic to and before you send make sure to preview and test so you can see this is what it's going to look like on desktop same thing with mobile but the problem is this is not like super accurate just because a lot of mobile aspect ratios are a little bit different so what you're going to do is you're going to hit send test and you're going to send it to your own email address Center open it up with your mobile it's really important that you do it this way because most email opens come from the phone and you're gonna just double check all of the ctas are going to the right places subject client and preview text is going to the right places as well and you're done this is how you create beautifully High converting play video email designs and if you're a seven figure brand booking a call with us we're going to crush emails for you because we do a good job for dozens and dozens of Brands every single day so yeah hope you enjoyed see you in the next one

Channel: Boyuan Zhao

Views: 3,569

Keywords: klaviyo email marketing, klaviyo, how to use klaviyo, email marketing, klaviyo tutorial, klaviyo email, klaviyo email marketing for shopify, how to use klaviyo for shopify, klaviyo abandoned cart email, klaviyo tutorials, email marketing for beginners, klaviyo tutorial for beginners, klaviyo email design, email marketing tips, email marketing tutorial, email marketing klaviyo, how to design klaviyo emails, how to design emails in canva, ecommerce email marketing, smma clients

Id: DBTjAF5saPo

Length: 17min 3sec (1023 seconds)

Published: Fri May 12 2023