Email design is not about making emails pretty. It is about creating templates that guide the reader's eye to the information that matters, present products in their best light, and make it effortless to click through and purchase. In Klaviyo, good template design directly impacts your open-to-click rate, conversion rate, and revenue per recipient.
This guide covers the design principles, technical best practices, and Klaviyo-specific techniques that we use when building email templates for our Klaviyo email marketing services clients.
Design principles for ecommerce email
Effective ecommerce email design follows a few core principles that remain constant regardless of brand, product, or audience:
1. One email, one goal
Every email should have a single primary objective. An abandoned cart email exists to recover the cart. A product launch email exists to drive traffic to the new product page. A welcome email exists to set expectations and drive a first purchase. When you try to accomplish multiple goals in one email, you dilute all of them.
2. Hierarchy matters
Design a clear visual hierarchy that guides the reader from headline to supporting content to CTA. The most important information should be visible without scrolling (above the fold). Use size, colour, and spacing to create a natural reading path.
3. White space is not wasted space
Generous padding and margins make emails easier to read and more visually appealing. Cramming content into every available pixel creates a cluttered experience that reduces engagement. Give your content room to breathe.
4. Show, do not tell
Product images convert better than product descriptions. A high-quality hero image of your product in use communicates more than three paragraphs of copy. Use images strategically to showcase products and create desire.
Layout and structure best practices
The structure of your email template determines how content is organised and consumed. Here are the layouts that work best for ecommerce emails in Klaviyo:
Single-column layout
The most reliable and mobile-friendly layout. Content flows vertically in a single column, making it easy to read on any device. This is the recommended layout for most ecommerce emails, including flows and campaigns.
Standard ecommerce email structure
- Header — Logo, navigation links (optional), and preheader text
- Hero section — A compelling image or product showcase with a headline
- Body content — Supporting copy, product details, or storytelling
- Primary CTA — A clear, prominent button that drives the main action
- Secondary content — Product recommendations, reviews, or social proof
- Footer — Unsubscribe link, social icons, legal information
Product grid layout
For emails featuring multiple products (new arrivals, category promotions, cross-sell recommendations), use a two-column product grid. Each product cell should include an image, product name, price, and a CTA button. Limit the grid to four to six products to avoid overwhelming the reader.
Mobile-first design
Over 60 per cent of ecommerce emails are opened on mobile devices. If your emails do not look and function well on mobile, you are losing the majority of your audience before they even engage.
Mobile design requirements
- Single-column layout that does not require horizontal scrolling
- Minimum 14px font size for body text (16px is even better)
- Touch-friendly buttons at least 44 pixels tall with generous padding
- Compressed images that load quickly on mobile data connections
- Short subject lines under 40 characters that display fully on mobile
- Preheader text that complements the subject line and fits mobile preview
Klaviyo's template builder includes a mobile preview mode. Use it for every email before sending. What looks good on desktop may break on mobile, especially multi-column layouts and oversized images.
Dynamic content blocks
Klaviyo's dynamic content blocks are one of its most powerful design features. They automatically populate email content based on customer data, product catalogues, and event properties.
Product blocks
Use product blocks in abandoned cart and browse abandonment flows to automatically show the specific products the customer interacted with. The block pulls the product image, name, price, and URL directly from the event data, ensuring every email is personalised to the individual.
Product recommendations
Klaviyo's recommendation engine can dynamically insert products based on the customer's browsing history, purchase history, or similar customers' behaviour. Use these in post-purchase flows, cross-sell emails, and newsletter campaigns.
Conditional content
Show or hide sections of your email based on profile properties or event data. For example, show a VIP message only to customers in your loyalty programme, display different content based on the customer's location, or show different product recommendations based on past purchase category.
For more on personalisation techniques, see our ecommerce personalisation guide.
Brand consistency across flows
Your email templates should feel like a natural extension of your website. Customers who click from an email to your Shopify development store should experience a seamless transition, not a jarring design mismatch.
Consistency checklist
- Use the same colour palette as your website
- Match your website's typography (or use a web-safe alternative that feels similar)
- Use the same logo placement and sizing
- Maintain the same photographic style and image treatment
- Use consistent button styles that match your website CTAs
Template library approach
Create a library of reusable template modules — hero sections, product grids, testimonial blocks, CTA sections — that can be assembled into different emails. This ensures consistency across all flows and campaigns whilst allowing flexibility in content.
Typography and readability
Email clients have limited font support compared to web browsers. Design your typography for maximum readability across all clients:
- Headlines: 22 to 28 pixels, bold weight, short and punchy
- Body text: 14 to 16 pixels, regular weight, generous line height (1.5 to 1.6)
- CTA buttons: 14 to 16 pixels, bold weight, high contrast against button colour
- Web-safe fonts: Arial, Helvetica, Georgia, Trebuchet MS are universally supported
- Custom fonts: Klaviyo supports Google Fonts, but they render as fallbacks in Outlook and some email clients
Keep paragraphs short (two to three sentences maximum) and use subheadings to break up content. Most email readers scan rather than read, so make your content scannable.
CTA button design
Your call-to-action button is the most important design element in any ecommerce email. Here are the principles that drive the highest click rates:
Button best practices
- High contrast — The button should visually pop against the background
- Action-oriented text — Use verbs: Shop Now, View Product, Complete Your Order
- Generous size — Minimum 44 pixels tall, full-width on mobile
- One primary CTA — Multiple buttons of equal prominence confuse the reader
- Bulletproof buttons — Use Klaviyo's built-in button blocks which render consistently across email clients
Testing and iteration
Email design is never finished. Use Klaviyo's A/B testing features to systematically test design elements:
What to test
- Hero image vs no hero image
- Single CTA vs multiple CTAs
- Product grid (2 products vs 4 products vs 6 products)
- Button colour and text
- Email length (short vs long)
- Image-heavy vs text-heavy layouts
Test one variable at a time, use a large enough sample size for statistical significance, and give tests at least 48 hours before drawing conclusions. For more on A/B testing in Klaviyo, see our flow optimisation guide.
Great email design is a competitive advantage. It builds brand recognition, drives higher engagement, and directly impacts revenue. Klaviyo gives you the tools to create sophisticated, personalised templates — the key is using those tools according to proven design principles.
If you need custom email templates or want to improve your existing Klaviyo designs, get in touch. We design and build templates that match your brand and drive measurable results.
