Skip to main content
829 Topics
Help Center

Understanding mobile email optimization

You will learn Learn about the default mobile optimization settings Klaviyo offers for emails, as well as tools for customizing how your message appears across devices. You can also choose to disable all mobile optimizations by navigating to the Styles tab of your email template.  General mobile optimization options If you choose to enable mobile optimizations, certain adjustments will be made automatically to optimize your email's appearance when viewed on a mobile device. If you would prefer your email not be optimized for mobile devices, disable optimizations in the mobile section of your template's Styles tab. There are a number of other settings that allow you to make adjustments specifically for mobile viewing, including: Adjust content margins Adjust text and heading sizes on mobile Adjust text and heading spacing on mobile Adjust block padding on mobile Header/Link Bar layout on mobile For any header/link block, scroll down to the Mobile layout menu within the Styles tab to select a mobile layout. The default is Stack all, and you can change this to suit your needs. Hide on mobile or desktop You can select if you would like a block to appear on mobile, desktop, or both. This can be customized for any block by navigating to the Display Options tab for a block. Stretch image option For an image block, you can choose to stretch an image to the full width of the frame when viewed on mobile. You will see this option in the Styles tab for any image block within the Block settings. Toggle Full width on mobile on or off.  Columns stack on mobile Stacking columns (created using the Columns layout or Split block options) on mobile devices allows for larger text and images that are easier to read on a small screen. If you'd prefer your columns appear side-by-side on mobile, disable this setting in that section's Styles tab. If you do, the columns will remain side-by-side, but will be resized to fit on a mobile screen.  Text block padding on mobile By default, all text blocks have at least 18px of padding on mobile. To remove this padding: Open the Styles menu.  Scroll to the Mobile text and headings section.  Turn off the Override text area padding toggle. Email client support for mobile optimization Many email apps have varying levels of support for mobile optimizations. If you are concerned about how your email design will render across different email clients and devices, using a third-party email testing tool can help. We recommend exploring the use of a tool like Litmus, which offers a free trial as well as monthly paid plans. You can also search for free alternatives that allow you to test and preview how your emails will look when viewed by recipients using different email clients and devices. Determine how many subscribers are opening on mobile In the Deliverability tab of a given campaign, scroll down to the Performance by Email Client section to see a breakdown of how many recipients opened your email on a mobile versus desktop browser. This can give you an indication of how your audience is interacting with your emails. You can also segment based on this information by adding a filter to the condition What someone has done (or not done) > Opened Email. Additional resources Getting started with SMS and MMS for the first time How to optimize popup and flyout forms for mobile

Help Center

How to customize the review submission page

You will learn Learn about customization options for the reviews submission page, including how to let reviewers choose an AI-generated headline for their review.  Review submission page To update the settings for your review submission page:  Navigate to the Reviews tab in Klaviyo. Click Reviews settings. Select Review submission page. Adjust the page settings as needed.  Click Publish changes.  Styles and logo settings To adjust the style settings for your review submission widget, select Styles and logo from the editor menu.  You can adjust the following color and style settings for your review page:  Page colors Background colorThe background color of the main section of the submission page (i.e., the portion of the page that contains content). Secondary background colorThe border color for input fields.  Accent colorThe color for selected answers to multi-choice, range, and centered range custom questions, the outline of an actively selected field, and the success page checkmark. Required asterisk colorThe color of the asterisk next to any field that must be completed before submitting the form, as well as the delete icon. Text style The default font and size for your text. Headings and other larger text are proportional to the size you select here.  Text colors Primary font colorUsed for the product name and field labels. This color is set to 50% transparency, and is used for field sample text and inputs.  Secondary font colorUsed for the product variant name and explanatory text throughout the form.  RatingThe color of the stars (or other selected rating shape).  Buttons Primary buttonThe button color, text color, and button radius (i.e., corner radius or corner rounding) of the submit button. Click the + symbol next to Primary button border to add a border to your submit button.  Secondary buttonThe button color, text color, selected text color, and button radius (i.e., corner radius or corner rounding) of all other buttons, including custom question multiple choice fields.  Click the + symbol next to Secondary button border to add a border to these buttons.Note: when a button color is selected, it will use the accent color selected under Page colors.  LogoThe brand logo at the top of the submission page; choose between S (small), M (medium), or L (large). Behavior settings Behavior settings control which elements appear on your review submission form. To adjust the behavior settings for your review submission widget, select Behavior from the editor menu.  Submission page Enable or disable the following options:  Ask for mediaAsk reviewers to submit photos of the product they received. Ask for headline on product reviewsAsk reviewers to write a headline for their review; if enabled, you can choose to offer AI-generated headline suggestions.  Celebration effect Show confetti when the reviewer clicks Submit.  Display variant nameInclude the name of the purchased variant under the product name.  Require review text for submissionPrevent reviewers from submitting a rating without text. Set minimum review word countRequire a certain number of words before a review can be submitted. This option is only available if Require review text for submission is selected.  AI-generated review headlines If you select the option Ask for headline on product reviews, you can turn on AI-generated review headlines. When this option is enabled, reviewers will see headlines generated as they write their review. They can then select a headline to use, or write their own.  Success page Ask to review other products in the orderAfter a reviewer submits their review, display other items from their order along with the option to leave a star rating and review. Limit number of products displayedSet a maximum number of products from an order to request reviews for.  Ask for store reviewAsk reviewers to leave a review for your store as a whole. These reviews appear in the SEO / All reviews widget.  Custom questions  The Edit custom questions button in the Behavior section opens a new page where you can add or edit custom questions.  Content  To adjust the content settings for your review submission widget, select Content from the editor menu.  Here, you can adjust the text of labels and sample inputs for your form fields, submission button, confirmation message, and more.  Any edited text will not be automatically translated, if you have automatic translation enabled.  To reorder elements in the Submission page section, drag and drop them using the handle on the left side of each element.  Submission page language Optionally, select a language for the review submission page using the Submission page language button. The default language is United States English.  Learn more about language settings for review pages and widgets.  Additional resources How to request reviews from your customers with Klaviyo reviews flows How to customize review widgets  

Help Center

How to create a base template

You will learn Learn how to create a base email template in Klaviyo. Once you create a base template, you can use it across your campaigns and flows to speed up your building process and ensure your branding is consistent across messages.  Before you begin A base template includes key sections like a header, body content, and a footer. Navigate to Content > Templates and click Create to get started. Then, follow the steps below to add reusable content to your template.  1. Set base styles Before styling any individual blocks, set your base styles. These styles, like font, colors, padding, and more, apply to all blocks across your template.  Adding base styles makes it easier to apply your branding, and it also reduces your code weight, making it easier to avoid clipping in Gmail. To add base styles:  Click Styles (next to Content). If you see Display Options next to the Styles tab instead of Content, click Done to navigate out of the block/section’s styles settings, which only apply to that block or section.  Set a background color for your template and content, along with margin and padding. We recommend leaving the Width setting as 600px for optimal compatibility with inbox providers. Add text styles, including fonts, font sizes, colors, and spacing. Make sure to set styles for Normal text, as well as H1, H2, H3, and H4. You can use these heading styles for prominent text throughout your email. Learn how to use a custom font in your emails. Add a link color and style. If Mobile optimization is turned on, add mobile settings. These will appear when someone opens your email on a mobile device. Learn more about mobile optimization. Finally, select your store’s currency in the Currency menu. The selected currency symbol is used wherever the {% currency_format … %} tag is present in a template. 2. Build a header section  After you set up your email styles, add your header section. Generally, header sections include a logo, key links, and sometimes a banner featuring information about your latest sale or the recipient’s VIP status.  If your template already has a header bar, update it with your own logo. Alternatively, drag in a Header block and add your logo. Learn best practices for image sizing and quality.  Select a layout in the Desktop layout and Mobile layout menus (e.g., Logo inline for desktop and Stack all for mobile). Remember that mobile devices use much smaller screens than desktop, so stacking content can make it easier to read and navigate.  In the Content section, add key site navigation links. Click the trash icon to remove links, or Add links to add them. Common links to include in your header are: shop now, new arrivals, about, sale, FAQs, or a selection of product categories. Adjust block styles in the sections below your link content. Remember, if you want to apply a style setting to your whole email, use the main Styles tab as outlined in the section above.  Click Done to return to the main template editing options. Add an optional feature banner You can add a feature banner above or below your header bar. Drag a text block into the same section as your link bar.  Set the background to an accent color and add a featured message, like “Use code WELCOME for 15% off your first order!” Check that your feature banner and link bar are in the same section by hovering over the space to the left or right of the blocks. A grey Section border should surround both blocks on hover, and it turns blue when the section is clicked. Optional: Click the star icon to save the section as universal content. Universal blocks and sections can be used across multiple templates, and you can edit all instances of the block/section at one time. Learn more about universal content.  3. Add body content Drag a Section block from the Layout section of the Content sidebar and place it beneath your header. Add placeholder blocks for your email body content. This might include text blocks with descriptions of your brand or promo messaging, common layouts you intend to use, placeholder product imagery, and more. Learn how to place content side-by-side using columns, split blocks, and tables. Learn how to add a background image to a section and overlay buttons, text, and other elements on top of it.  4. Build a footer section Klaviyo requires you to include an unsubscribe link in your emails, and this is most commonly placed in the footer. In addition, these footer elements are recommended:  Your business address A link to your privacy policy  Links to your social profiles (e.g., Facebook, Instagram, Twitter, Tiktok)  A link to your website An email preferences link To add a footer to your base template: Drag a new section beneath your body section, or edit the default footer. Add a text block. Click Personalization.  In the Search personalization field, search for “unsubscribe.” Select Unsubscribe to add an unsubscribe link tag to your text block. Use this same menu to add an organizatio

Help Center

How to add and edit text blocks in emails

You will learn Learn how to add, edit, and style a text block in an email using Klaviyo’s drag-and-drop email editor.  Add a text block To add a text block to an email, open any email that uses the drag-and-drop editor (e.g., a flow email, campaign email, or email template). Then:  Hover over the Text block in the Content sidebar.  Click on the block and drag it into the canvas.  When you’re happy with the block’s placement, release your cursor to drop the block in. Edit text  You can edit text directly in the email canvas. (Note that other text fields, like text in button blocks and table blocks, must be edited in the block sidebar, rather than in the canvas.)  Click any text block to select it.  Double-click the selected text block to access the text editor, then begin typing. Klaviyo's email editor uses the UTF-8 encoding standard, which means it supports Latin characters, emojis, double byte characters, and more.   To add copy in a language that uses a right-to-left (RTL) script (e.g., Hebrew), add the following code snippet to the source code of a text block or an HTML block at the top of your template: <style type="text/css">     p, h1, h2, h3, h4, ol, li, ul { direction: rtl; } </style> Styling text  The styling includes choosing your font, font size, color, etc.  Klaviyo recommends setting styles in the main Styles tab, rather than manually editing the styles for each text block. This reduces code weight, decreases the likelihood that your email will be clipped, and helps ensure your styles are consistent.  Add styles for all text in an email From the Content sidebar, click Styles. In the Text & Headings section, choose a font, font size, color, and other styles for your normal text, plus your headings (H1-H4). You can also choose a color and style for links in this tab. Click Done.  Manually add styles within a text block Use this method sparingly, as it can increase the code weight of your email, which may lead to clipping. Always add your standard styles in the Styles tab, then make adjustments to individual words or phrases with the text block settings.  To add styles to content within a single text block, like bolding a single word or phrase:  Open the text block editor.  Highlight the text you’d like to style.  Choose style options, like a font, size, or color. Additional resources How to add custom fonts in email templates Guide to the email template editor How to insert an image into a text block How to insert personalization into text blocks

Help Center

Guide to the email template editor

You will learn Learn about Klaviyo’s drag-and-drop email template editor, including how to use template styles and configure each block type.  About blocks and layouts  When you open the Klaviyo email template editor, the sidebar will display a selection of block and section options to choose from. Choose between basic blocks, which are blank slates used to build emails from scratch, and universal content, which is content you’ve built in other templates and saved for later use.  In the Basic section, you’ll find a selection of both blocks and layouts. Use blocks to add content, like text, images, or buttons. Use layouts (i.e., sections and columns) to group your blocks and configure them.  Blocks and sections can be cloned, deleted, or saved using the icons that appear when you hover over the block or section.  To move a block or section, click and drag it.  Template styles The main Styles tab contains several styling options that will apply to your entire template. To access a template’s main styles settings, navigate out of any blocks or sections you’re working in using the Done button, then click Styles.  This is where you can set the look and feel of your email. If you've gone through the setup wizard, this area will already contain some of your brand styles. To adjust the brand styles that populate in new templates, navigate to Brand Library > Brand.  Here, you can edit the following settings: Email  Template background Choose a background color for your template  Background imageOptionally add a background image  Content backgroundSet a background color for the content of your email; this color can be different than the template background, and only spans the width of your email’s content  WidthThe width of your email content (600px recommended) Corner radius, margins, padding, and border Add spacing and borders to your template  Text & HeadingsSet styles for normal text and four heading styles, then choose a text style from the dropdown menu in any text block to apply it  FontSelect a font, font spacing, size, weight, and color for the text style  Letter spacingSpacing between each letter horizontally  Line spacing Vertical spacing between lines of text Text alignmentChoose left, center, or right-aligned MobileChoose whether to enable mobile optimization (recommended) or display the same styles and content on both desktop and mobile  Other CurrencySelect a default currency for the template, if different than your account settings  How template styles interact with block and section styles Your template style settings will be applied to your template first, before any block or section-specific settings are applied. If a block or section’s styles conflict with your template styles, the block and section styles will be used. For example, if you set a content background color in the main Styles section, then set a block-specific background color, the block's background color will be used for that block's area.  Sections and section styles  All content in the template editor is organized into sections. When you create a new template, it will contain one or more sections by default, and you can add or delete sections as needed.  To open a section’s settings, click the area to the right or left of that section’s content. Note that clicking a block will open the settings for that block, rather than the section containing it.  Each section has a Styles tab and a Display Options tab. Use the section’s styles to add background images, padding, and other styles to that section. Use the section’s display options to choose which device types and recipients should see the sections.  Learn more about sections. The section style settings will be applied to your template after your template styles, but before any block-specific styles. If the template styles conflict with your section styles, section style will be used. If a block’s settings conflict with your section styles, the block’s style will be used.  Blocks and block styles Within sections, add blocks to populate your email with content. Most content blocks have a Styles tab, where you can configure the appearance of the block, and a Display Options tab, where you can choose who should see the block and which device types it should display on. The specific styles settings available are different for each block type, but the same display options are available for all blocks.  Learn about display options or read on to learn about block types and how to use them.  Text  Use a text block to add text to your emails. Choose a text style (Normal or Heading 1 - 4) to apply the style settings from your main template’s styles, or customize the text content with the text editor’s settings.  Klaviyo's email editor uses the UTF-8 encoding standard, which means it supports Latin characters, emojis, double byte characters, and more.   You can add dynamic content to your text block to personalize the message for each recipient. Learn m