demobook

Designing emails in Klaviyo's editor

Demo summary

Walks through using the drag-and-drop editor to replace images, add product sections, and integrate social links into a template.

Step-by-step

  1. Open the Klaviyo drag-and-drop editor
  2. Select an image block and click Replace to swap in your graphic
  3. Adjust the image height settings in the sidebar
  4. Drag in product sections to display specific items
  5. Add social media sections to integrate your profile links

Options

  • Import custom graphics from design tools like Figma
  • Include discount codes or mission statements within text blocks

Tips

  • Use high-quality graphic design images to make the email more effective

Highlights

Everything inside Klaviyo is just straightforward

All demos from “Klaviyo Email Marketing Tutorial For Beginners (FULL SETUP)

  1. 4:533:49Create and customize a Klaviyo signup formDemonstrates how to select a form template, adjust the background and behavior settings (like 30-second delay or exit intent), and configure mobile vs. desktop targeting.KlaviyoAdd an opt-in popup
  2. 8:541:41Setting up a Welcome Series flowShows how to trigger an automated email series when someone signs up for a newsletter, including setting wait times between emails.KlaviyoBuild a welcome / drip automation
  3. 10:372:14Designing emails in Klaviyo's editorCurrentWalks through using the drag-and-drop editor to replace images, add product sections, and integrate social links into a template.KlaviyoDesign a newsletter / email (drag-and-drop editor)
  4. 12:481:11Configuring Abandoned Cart flowsDemonstrates setting up triggers for when a customer leaves items in their cart without completing a purchase.KlaviyoSet up an abandoned-cart flow (ecommerce)
  5. 14:331:42Creating and scheduling a campaignShows the process of selecting a campaign template, writing a subject line, and scheduling the send time.KlaviyoSend a broadcast campaign
  6. 16:131:25Creating audience segmentsDemonstrates how to build segments based on customer behavior, such as 'Engaged 60 Days' or 'Unengaged' subscribers.KlaviyoSegment the list
  7. Watch “Klaviyo Email Marketing Tutorial For Beginners (FULL SETUP)” →

Design a newsletter / email (drag-and-drop editor)

  1. 1:280:36Generate email subject lines with AIShows how to use Klaviyo's subject line AI to generate and select optimized subject lines based on campaign context.Klaviyo
  2. 2:041:27Draft email content with AIDemonstrates using the 'draft email content' AI button to generate full email layouts and copy from a text prompt, including section-specific AI generation.Klaviyo
  3. 5:332:01Designing Email Templates with Drag-and-DropWalks through the visual editor using sections and blocks, highlighting universal content for brand consistency and dynamic tables for personalized data rendering.Business Solution
  4. 11:042:38Designing Emails in Klaviyo EditorShows the process of uploading designs from Figma, using the drag-and-drop editor, and creating text-based native emails.Max Sturtevant
  5. 8:162:24Design an email campaign using images and text blocksThe creator shows how to import design assets from Figma into Klaviyo's drag-and-drop editor, alternating between image slices and text blocks for better deliverability.Walshy Mails | Sunlo Consulting
  6. 1:040:22Using Smart Translations in KlaviyoDemonstrates how to use the Smart Translations feature to build a message, select supported languages, and automatically generate localized versions based on Shopify locale data.Klaviyo
  7. 1:290:15Conditional content blocks based on localeShows how to use locale data to show or hide specific blocks within an email for regional promotions or shipping notes.Klaviyo
  8. 0:181:53Using Commerce7 product blocks in KlaviyoThe demo shows how to drag product blocks into a Klaviyo template and use dynamic product feeds to automatically pull in wine products (vintage, varietal, etc.) from Commerce7.Digimatic
  9. 10:372:14Designing emails in Klaviyo's editorCurrentWalks through using the drag-and-drop editor to replace images, add product sections, and integrate social links into a template.Max Sturtevant
  10. 6:56:045:55Upload custom Figma designs to KlaviyoWalks through slicing a design in Figma, compressing images, and rebuilding the layout in Klaviyo using image blocks and tables for social icons.Max Sturtevant
  11. 14:451:55Setting up the Klaviyo Brand LibraryUploading logos, selecting brand colors, and importing Google Fonts for consistent email styling.Emiel Dingemans from Magicianly | Email Marketing
  12. 2:34:4411:34Importing Custom Designs into KlaviyoDemonstration of taking sliced images from Figma, compressing them, and assembling them into a responsive email within the Klaviyo editor.Emiel Dingemans from Magicianly | Email Marketing