Topics started by Anna McCarthy

Dynamic table blocks don’t always have to show a product and its description side by side in the traditional horizontal format. In fact, you can build a dynamic table block that stacks vertical where your product details are highlighted underneath your product image!The directions of this post are very similar to the last post - Building a dynamic table block using event data - showing how to create a dynamic event table from scratch. The only difference here, is the image will be added within the text portion of the table, through the image button. So, the directions will be the same until the last paragraph where I discuss how to add in an image to the text.Dynamic event data will only show when the email is inside of an event based flow (abandoned cart, etc). For this example, I will be talking about abandoned cart, but this process can be used with other event triggers as well. This data shows information on what the customer did when on your website. In a flow email, add in a tabl

Have you ever wondered how to only show certain content to select email recipients?Well, show/hide blocks allow you to do just that! This function allows you to show content to some profiles based on their saved properties or events, and different content to other profiles based on their saved properties/events, all within one email. So, you don’t have to send multiple different emails to different audiences, if you don’t want to. In the new email editor, select ‘Display Options’ for any section or specific block. Here, you will find the ‘show/hide logic’ entry. This is where we will add our logic of who will see this specific block.To show a block based on a saved profile property, every show/hide logic statement will follow this structure: person|lookup:’Name of Property Here’ . Please ensure capitalization matches exactly to how the property looks on the profile. That statement, will simply show the blocks if the person viewing has that property saved on their profile, at all. If yo

Displaying relevant products is a staple of any email marketing strategy. None is more important than the use of a dynamic table block to highlight products users have abandoned or have purchased.Dynamic event data will only show when the email is inside of an event based flow (abandoned cart, etc). For this example, I will be talking about abandoned cart, but this process can be used with other event triggers as well. This data shows information on what the customer did when on your website. In a flow email, add in a table block. Under table settings, turn to Dynamic. Go to preview tool for started checkout, find the repeating beginning variable for each item. IE: for price, name, quantity each of these begin with ‘event.extra.line_items’. This repeating string will be used for the row collection under table settings. Add in just the repeating string for row collection, nothing else. So, event.extra.line_items under row collection. Row alias can be anything you want, this one word wil

 Do you often come up with fantastic new email design ideas, but find yourself unsure of how to bring it to life?Klaviyo’s Email AI tool allows you to describe the content you want and creates complete section layouts that include images, text blocks, buttons, and compelling copy that is ready to be edited and finalized by you. A couple important things to note before we continue: first, this tool is available for only paid Klaviyo accounts. Additionally, although this assistant creates email sections for you, you are still responsible for the final content.To use this tool, first create a template in the drag and drop editor. Next, select an existing section or add a new section.Hovering over the section block, you’ll notice the new “sparkle” icon where the clone/delete buttons are located. In the “Describe the section” text input, you can add a description of what you want the tool to build and specify what types of drag/drop blocks you’d like included or what copy to add. For exampl

Universal saved content is a long awaited feature that we’re very excited about! With UC (Universal Content), you can save a section/block universally, add it to other templates, edit the content, and have the changes reflect everywhere the UC block is added. Or, you can add the UC to different templates, unlink, and edit locally - so the changes are not reflected everywhere, just in the one template you’re editing. This is very helpful for footers or other sections you use in every email, if a change is needed (ex: updating the link for privacy policy, or your copy for footer closing statement, etc), if the block is universally saved, then you can simply edit the content once and have the changes reflect everywhere the UC block is added. To use UC, simply select the star button to save and name the block/section. Now, you will see it is under the ‘universal’ tab next to default (screenshot below). By default, all saved blocks will save universally, but you can unlink after to not upda

 Logos are how customers remember your brand. Therefore, it’s important to use one that is clear and crisp in your emails.We recommend for your logo image to have at least 72dpi. This dpi rate is different than actual pixel size. For logo pixels, we recommend around 170 x 40 pixels.You can also use a logo larger than this size, and then use the 'image width' field to make the logo show smaller, but the actual image size is larger. Please take a look here for more information on logos.I can also suggest using an image block for the logo, and then a 'links only' header bar below. So, the logo image is not within the header block. Additional Resources: Basics of Brand Design How to Use Images in Emails

Similar to using the show/hide function, using If/Endif statements can be used to show certain copy if the viewer meets the if/endif statement requirements, based on their saved profile properties. IE: You have a form on your website that asks if customers prefer cats or dogs as a pet. The customer fills in the form with their email address, stating they like dogs.  A different customer fills in the form saying they like cats.  In an email template, you can write an if/endif statement that directs customers who filled in ‘dogs’ to see one statement, and a different statement for customers who filled in ‘cats’ to see a different statement. The if/endif statement for this would look like the following: {% if person|lookup:'Interested in Dogs?' and not person|lookup:'Interested in Cats?' %}   Like dogs? Check out some great toys for your canine.{% elif person|lookup:'Interested in Cats?' and not person|lookup:'Interested in Dogs?' %}   Like cats? Check out some great toys for your feline.

In my last Community post, Sections and columns in the new editor, I explained how the new section and column layouts work. In the new editor, you can now add sections with two columns. Columns can be vertically layered. Meaning, on the left hand side (for example) you can add a text block and a button block underneath it, while on the right side, an image block. This format is great for showing and describing a new product or service. The button within the section directs the viewer to read more/purchase the product after reading about it and seeing the picture. This is a proven successful design, meaning formats like this receive high click rates. Sections can have background colors added to the entire section, so spacers are not needed anymore to ‘fill in’ the color.  

Background images are another new exciting feature of the new editor. You can drag and drop in a section and simply toggle on the background image button. Here, you can select an image that you want other blocks to pile on top of. It’s helpful to pick an image that doesn’t have words or one central focus - since content will be added on top of it. We suggest adding a ‘lifestyle’ shot to express the brand’s views/tone or mood. Once the image is added, you can drag/drop any blocks on top like a normal section. For more of the background image to show, you can increase the section’s padding top and bottom.Stay tuned for my next post as I’ll be discussing a group favorite topic; building dynamic table blocks in the new editor! Additional Resources: How to Set a Background Image for a Call to Action (new editor) How to Add a Background Image to an Email Template

It’s never fun to encounter the dreaded “[Message clipped] View entire message” notice at the bottom of your emails. Thankfully there are some best practices you can follow and actions you can take in our new and classic editors to make sure you don’t run into them too often.New Editor Clipping:If you are experiencing clipping in the classic or new email editor, your template will have to become smaller. Some tips for making your template smaller in the new email editor are the following:Limit the use of multiple sections. Limit the use of background images in sections. Limit the use of device-specific blocks (i.e. desktop-only / mobile-only). Consolidate settings as much as possible. For example, set a background color at the section level instead of on each block within the section. Consolidate blocks as much as possible. Use a single text block where possible instead of multiple text blocks one after another.    The classic editor is deprecated as of May 2023. Please use the New Edi

Below is a list of my favorite resources for email design and capability tutorials. Feel free to comment and share any of your own favorite resources!I have a public facing Loom Library of Email Template Design Tutorials Getting Started with the Email Editor - Start Here!  Email Design Academy Course for Beginners - This academy course teaches email design principles all successful marketers should know! Klaviyo Syntax - Add personalization to emails! A small library of real Klaviyo customers email designs can be found here (folder linked in document), some examples are pulled into the doc with reasons why this campaign is successful. You can also check out this webinar recap video here - at around ~2:26:03, the webinar topic is 'Session 3: Designing better emails with Klaviyo'.   Email Design General Tips & Tricks:In general, more white space, and less content - shorter emails usually have higher click rates  Not too many CTAs, pick one (maybe 2) ideas or products you’re looking t

Cyber Weekend is a very important weekend for ecommerce shops. Shopify store owners collectively made a whopping $6.3 billion USD in sales globally on Cyber Weekend, a 23% increase from 2020 (source). In this post, I’ve collected some important information, resources and best practices for this weekend. Make sure to check out the loom video where I show an example template I designed that uses these best practices. In the video, I also show real Klaviyo customer’s successful Cyber Weekend emails (and explain why they worked well!). Let’s get started! First, as always, my list of General Email Design Resources Here (many of the topics I go over in the video can be found here). Data driven - Can try AB testing a month or two before cyber weekend and use the winning practices in your cyber weekend emails. Ideas for AB testing: Different color CTAs, subject lines, header link bars (using 1 Header linkbar with links in one email, different email just an image of the logo - seeing if the lin

Wanted to share some exciting news - you can now convert a classic editor template into the new editor through the push of a button! This prevents you from having to manually recreate a template that was designed in the classic editor, into the new editor. This Switch to New Editor button can be found at the top of the classic editor next to the Save & Return to Templates button. Once the button is selected, the page will reload with the template converted into the new editor. This button can be used in any email template under Email Templates, Flow Message, or Campaign. The process is the same everywhere in Klaviyo. The template’s contents will be in one large section. If you’d like, you can drag/drop in a new section and move blocks into the new section in order to break content into different sections. Please ensure to manually check the template after converting the template to the new editor before sending out. Some content may need to be adjusted. For example, formatting and

Hello Community!I hope the posts and the walkthrough tutorial videos I’ve provided were helpful. If you haven’t had a chance or may have missed one of them, don’t worry! I’ve included all of my posts below in the order they were released starting with Klaviyo’s New Template Editor versus the Classic Template Editor post. 

Showcase is not currently available. This video can give you inspiration for your own template designs you’ve encountered. A small library of real Klaviyo customers email designs can be found here (folder linked in document), some examples are pulled into the doc with reasons why this campaign is successful.  Klaviyo Showcase is a great tool to browse how other real Klaviyo customers are using and customizing their own email templates. If you find a template you like, you may be wondering - how do I recreate this for my own brand?So, as of now - it is not currently possible to 'clone' one of the Showcase templates into your own Klaviyo account and customize it. The examples of inspiration in Showcase are real email and SMS sent by Klaviyo customers and to respect their privacy, we do not allow others to clone their work. For the time being, the best option would be to manually recreate the template in your own account based on the components of the Showcase template. Checkout the video

Creating an NPS header link bar is great for saving’s customers thoughts/small review on a product or service. In these instructions, header link bar will be abbreviated to ‘HLB’.First, drag/drop in a header link bar into your template and set the HLB to ‘links and buttons only’ - to remove the logo. Next, add as many ‘links’ as you’d like. So, if you want people to rate something from 1-10, you would add 10 links within the HLB.The customer will only see what is displayed as ‘text’ in the HLB. So, you can label the links as 1-10, and set each link as 0-10. For this example we’ll focus on the 0 button:For all of the links (or, buttons within the HLB), the Link Address field will follow this formula: {% update_property_link 'profile_property' 'property_value' 'redirect_link' %}You should update Profile Property to the name of the property you want this to be saved as, Property Value with the individual value when a customer selects this link/button, and add in a redirect link only if yo

The Classic Editor is deprecated as of May 2023. This post can be used to highlight the added benefits of the New Editor or instructions using it.  There are many exciting differences between the new and old editor. Other than an updated UI (user interface) for a fresh, clean look, the new editor introduced Sections and Columns as well. Sections are essentially grouping mechanisms. A section can be dragged/dropped into the template and then more than one block can be added into a section, and the whole section can be saved - in order to save more than one block at a time, or a whole layout. You can add Columns into a section. Columns allow you to add blocks side by side rather than just vertically stacked. I have a different loom video specifically explaining sections and columns here as well for more info specifically on this.  In the New Editor, you can also add in background images to sections which is not possible within the old editor. Custom fonts can be added without any code ne

In the classic editor, you can add drag/drop capability into an HTML template. This means, you can import in an HTML template, add the code below to the template’s code, and then in that specific spot you added the code, a drag/drop block can be added. The drag/drop capability is only enabled where the code was added within the template - the whole template does not become drag/drop - that is not possible.Order of steps written out:Import in HTML template, or select edit on existing HTML template Paste the following code, wherever you want the product block (or any other drag/drop block) to be: <tr>    <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"><div class="klaviyo-block klaviyo-text-block"><p>text/drag drop block here</p></div></td></tr>   Create campaign using the HTML template Drag/drop in the product block where the HTML was added, it will say ‘text/drag drop block here’ Done!It is up to your

An added capability of the New Email Editor are the Sections and Columns buttons. These two buttons, under Layout, can be dragged/dropped into templates. Sections are essentially grouping mechanisms. A section can be dragged/dropped into the template and then more than one block can be added into a section, and the whole section can be saved - in order to save more than one block at a time, or a whole layout. You can add Columns into a section. Columns allow you to add blocks side by side rather than just vertically stacked. With sections, mobile stacking can be toggled off so content will remain horizontal on mobile. Or, you can control the vertical stacking from left to right or right to left.This helps minimize the need for mobile only and desktop only blocks. Making your template smaller is also a great strategy to prevent Gmail Clipping like I previously discussed in my Don’t get cut off because of Gmail clipping Community post.Keep an eye out for my next post as I’ll be going ove

This longer post will be centered only on adding custom fonts for the new email editor, but don’t worry - I’ve included Loom videos and some links below that show how to add fonts in the classic editor as well!To add a custom font to the new email editor, first collect your import link. This import link can be from google fonts, adobe typekit, or if you’re using a font that is not available on google/adobe, the font file has to be uploaded to either your website’s (ex: add font file to Shopify) backend or your DNS provider (ex: add font to AWS). All you will need to add the font to Klaviyo, is an import link of any kind. Screenshots attached of different import links. Once you have the import link, navigate to Brand Library in your account. Select Fonts > select which font type you are importing. Please note, not all email clients will show custom fonts, so a fall back font is needed for all custom fonts. The fallback font will show when an email client can’t load the custom font.Fo

New Editor - Clearing External StylesYou could be seeing display issues once your email is sent, if you originally created the email by copying and pasting your text from a different source (Google Docs, Microsoft word, external email, etc). When copying/pasting this content, the external inline styles from the original source can get carried over causing display issues since these styles are not native to Klaviyo. If you are copying/pasting content from an external source (google docs, different email, etc) please ensure to either 'paste without formatting' or paste and then clear formatting in order to clear inline styles. In order to clear these external inline styles, please highlight the content > select the 3 dots button > clear formatting, to remove these styles.On Macs you can paste without formatting using: Command + Shift + V. On PCs you can paste without formatting using: Ctrl+Shift+V You can always 'paste without formatting' or clear formatting, and then using Block S