demobook

Importing Custom Designs into Klaviyo

KlaviyoTry it →Watch full video →Emiel Dingemans from Magicianly | Email MarketingEmiel Dingemans from Magicianly | Email Marketing·

Demo summary

Demonstration of taking sliced images from Figma, compressing them, and assembling them into a responsive email within the Klaviyo editor.

Step-by-step

  1. Navigate to Campaigns in Klaviyo and open your email content in the drag-and-drop builder.
  2. Compress your exported image slices using a tool like TinyPNG to reduce file size.
  3. Delete existing blocks in the Klaviyo editor, keeping only the mandatory unsubscribe section.
  4. Drag an Image block into the editor and upload your first compressed slice.
  5. Duplicate the image block and use 'Replace' to upload subsequent slices until the structure is complete.
  6. Adjust padding on the top, bottom, and sides of each image block to ensure a seamless layout.
  7. Add descriptive Alt Text to every image for accessibility and deliverability.
  8. Insert destination URLs for each image, including discount code parameters where applicable.

Options

  • Use alternative compression tools like Squoosh.app or ILoveIMG.com
  • Import Google Fonts or Adobe Fonts to use real text blocks instead of image-based text
  • Select standard fonts and set global mobile/desktop text sizes in the Styles tab

Watch out for

  • The unsubscribe section is mandatory and must not be deleted from the layout.
  • Large uncompressed images (e.g., 2MB) must be reduced to improve email deliverability and load times.

Tips

  • Set mobile text size to at least 16px and desktop to 18px with 1.5 line spacing for better readability.
  • Link images directly to specific collection pages rather than the homepage to make it easier for customers to find products.
  • Include discount codes directly within the URL (using the redirect parameter) so they apply automatically when a user clicks.
  • Upload all images first to establish the general structure before fine-tuning the padding and links.

All demos from “Klaviyo Email Marketing FULL COURSE 2026 ($300M Generated for Shopify eCommerce)”

  1. 6:061:16Klaviyo Account Creation and Shopify IntegrationWalkthrough of signing up for a Klaviyo account, selecting business type, and connecting a Shopify store URL.KlaviyoImport / migrate contacts
  2. 7:221:22Setting up a Main Subscriber ListDemonstration of creating a newsletter list and choosing between single and double opt-in settings.KlaviyoTag & manage subscribers
  3. 8:443:57Setting up a Dedicated Sending Domain and DMARCStep-by-step guide on adding NS and TXT records to DNS settings (Squarespace/Google Domains) to verify a branded sending domain in Klaviyo.KlaviyoAuthenticate sending domain (SPF/DKIM/DMARC)
  4. 12:412:04Configuring Smart Sending and Attribution SettingsAdjusting account-level settings for smart sending windows, conversion attribution, and UTM tracking parameters.KlaviyoDeliverability & setup
  5. 14:451:55Setting up the Klaviyo Brand LibraryUploading logos, selecting brand colors, and importing Google Fonts for consistent email styling.KlaviyoDesign a newsletter / email (drag-and-drop editor)
  6. 19:177:25Creating and Targeting a Popup Signup FormBuilding a popup form from a template and configuring advanced targeting rules like exit-intent, scroll depth, and URL exclusions.KlaviyoAdd an opt-in popup
  7. 26:428:36Designing a High-Converting Signup FormUsing the form editor to customize headlines, input fields, CTA buttons, and success pages while removing friction elements like the 'X' close button.KlaviyoCreate an email signup / subscription form
  8. 37:101:58Setting up a Signup Form TeaserDemonstrating how to create a persistent 'teaser' tab that allows users to reopen the signup form after closing it.KlaviyoCreate an email signup / subscription form
  9. 39:083:37Optimizing Signup Forms for MobileCloning a desktop form and adjusting button sizes, font sizes, and input field heights specifically for mobile users.KlaviyoCreate an email signup / subscription form
  10. 48:081:31Adding a 'Micro-Yes' Step to Signup FormsDemonstrating how to add an initial commitment step to a form to increase overall conversion rates.KlaviyoA/B test a campaign
  11. 56:119:34Klaviyo Flow Builder BasicsAn overview of the flow interface, including selecting triggers (Added to List, Placed Order), adding profile filters, and using conditional splits.KlaviyoBuild a welcome / drip automation
  12. 1:05:4510:54Building a Multi-Step Welcome Series FlowConstructing a 7-email welcome sequence with specific time delays and content angles like brand story, bestsellers, and social proof.KlaviyoBuild a welcome / drip automation
  13. 1:19:135:28Setting up a Site Abandonment FlowCreating a flow triggered by 'Active on Site' to target visitors who browse the home page but don't view specific products.KlaviyoTrigger emails from behavior / events
  14. 1:24:414:06Building a Browse Abandonment FlowConfiguring a flow triggered by 'Viewed Product' with filters to exclude those who have already added items to their cart.KlaviyoTrigger emails from behavior / events
  15. 1:28:477:56Creating an Abandoned Cart FlowSetting up a flow triggered by 'Added to Cart' and explaining the difference between cart abandonment and checkout abandonment.KlaviyoSet up an abandoned-cart flow (ecommerce)
  16. 1:38:5311:12Building a Post-Purchase Customer Thank You FlowDesigning a flow triggered by 'Placed Order' that uses conditional splits to distinguish between first-time and returning buyers.KlaviyoSet up a post-purchase / win-back flow
  17. 1:53:203:16Creating a Sunset Flow for Unengaged SubscribersSetting up an automation to re-engage or suppress subscribers who haven't opened emails in a long period to protect sender reputation.KlaviyoImprove deliverability / avoid spam
  18. 1:57:472:53Creating and Scheduling an Email CampaignThe process of starting a new campaign, selecting recipients, and navigating to the drag-and-drop editor.KlaviyoSend a broadcast campaign
  19. 2:34:4411:34Importing Custom Designs into KlaviyoCurrentDemonstration of taking sliced images from Figma, compressing them, and assembling them into a responsive email within the Klaviyo editor.KlaviyoDesign a newsletter / email (drag-and-drop editor)
  20. 2:49:395:43Building an Engaged Customer SegmentUsing the segment builder to define 'Engaged 120 Days' based on email opens, clicks, and website activity.KlaviyoSegment the list
  21. 3:05:320:33Bulk Suppressing Unengaged ProfilesShowing the shortcut in Klaviyo to suppress all current members of a segment to clean the email list.KlaviyoTag & manage subscribers
  22. 3:22:321:32A/B Testing Campaign Send TimesSetting up a send-time split test to determine which hour generates the highest 'Placed Order' rate.KlaviyoA/B test a campaign
  23. Watch “Klaviyo Email Marketing FULL COURSE 2026 ($300M Generated for Shopify eCommerce)” →

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 editorWalks 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 KlaviyoCurrentDemonstration 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
demobook

Show, don’t tell.

Categories

LaunchesEmail MarketingImage Generation & EditingMusic & AudioSales TechVideo & Animation

Trends

AI Fruit Video

About

SubmitAboutPrivacyTermsContact

© demobook.co