Email Design Best Practices for Ecommerce in 2026

The best ecommerce email design is not the prettiest email. It is the design that makes the message easier to understand and the next action obvious.

Sometimes that means strong product photography, visual comparison, clear hierarchy and a large CTA. Sometimes it means almost no design at all.

At Magicianly, some of the strongest emails we send are simple founder-style plain-text emails.

That does not mean design is bad. It means design should earn its place.

By Emiel Dingemans, Founder of Magicianly

1. Start With One Job

Before opening Figma or your email editor, answer: what is this email supposed to make the reader do?

One email should normally have one primary job. Examples:

• discover a new product
• finish checkout
• understand a benefit
• read a customer story
• shop a sale
• reorder
• reply to the founder

The more competing objectives you add, the harder the email becomes to scan.

2. Design for Skimming

People do not read most ecommerce emails word for word. They scan. So create a clear visual path.

A reader should be able to understand, within seconds:

1. 1what this is
2. 2why they should care
3. 3what to do next

Useful tools include:

• short copy blocks
• descriptive headlines
• spacing
• contrast
• product imagery
• clear CTAs
• simple hierarchy

Do not make customers work to understand the email.

3. Mobile Comes First

A campaign that looks beautiful on a 27-inch desktop monitor but breaks on a phone is not well designed. Build with mobile in mind from the beginning. Check:

• headline wrapping
• product-image size
• button size
• spacing
• font size
• text alignment
• image cropping
• stacked columns
• footer usability

Do not simply build desktop and hope the editor handles mobile automatically.

4. Keep the Email Width Sensible

Email HTML has more rendering constraints than a modern website.

A common technical width is roughly 600 to 640 pixels for the main desktop email container. That gives the layout room while remaining compatible with common email clients.

Do not treat this as a creative limitation. Treat it as a different medium, and use official email development guidance such as WooCommerce's email HTML best practices as the technical reference.

5. Do Not Turn the Entire Email Into One Giant Image

An all-image email creates several problems.

• If images do not load, the message disappears.
• If the image is difficult to read on mobile, the email becomes useless.
• If accessibility tools need live content, there is little to work with.

Use live HTML text for important content whenever practical, particularly:

• headlines
• offer text
• navigation
• product names
• supporting copy
• CTA text
• footer information

Images should support the message, not contain the entire message.

6. Use Alt Text

Every meaningful image should have useful alt text.

image1.jpg

Black waterproof running jacket shown from the front

The goal is to explain what matters if the image cannot be seen. Decorative images can be treated differently according to accessibility best practices.

7. Use Product Photography When Seeing the Product Helps Sell It

There are categories where strong design matters enormously. Examples:

• fashion
• furniture
• beauty
• food
• art
• jewelry
• visually differentiated products

If seeing the product is part of understanding why somebody wants it, show it. Do not turn an ecommerce email into plain text simply because plain text sometimes performs well.

8. Use Plain Text When the Human Feeling Is the Advantage

We use plain-text style emails regularly. They can work particularly well for:

• founder messages
• final flow reminders
• re-engagement
• winback
• post-purchase check-ins
• high-AOV concierge-style support
• moments where trust matters more than visuals

The format feels different from the polished campaigns surrounding it. That contrast is part of the point.

From our own campaign and flow work, plain-text founder emails often outperform designed emails in specific contexts. But not every email should become plain text.

9. Our Approximate Plain-Text Mix

A practical starting point we use is roughly one in five emails in a plain-text style. Think around 20%, not 100%.

The remaining emails can use design where design improves:

• product understanding
• visual storytelling
• comparison
• launches
• merchandising
• brand experience

The precise ratio should be tested by brand. This is a starting framework, not a universal law.

10. Do Not "Design" Your Plain-Text Email

If you decide to send a plain-text style email, commit to the format. Do not add:

• a giant banner
• six buttons
• a product grid
• decorative footer modules
• hero artwork

and then call it plain text. A good founder-style email may simply have:

• a real sender
• a human opening
• a short message
• one purpose
• one main link
• a real sign-off

The simplicity is the format.

11. Use One Primary CTA

An email can contain repeated links to the same destination. That is different from giving the reader five unrelated actions.

For most campaigns, establish one primary action. Examples:

• Shop The Collection
• See What's New
• Finish Your Order
• Find Your Shade

The CTA should match the job of the email.

12. Put the Main Message Early

Do not make customers scroll through:

• logo
• a giant hero
• brand poetry
• a founder quote
• three decorative sections

before understanding why you emailed them. Above the fold does not need to contain everything, but it should establish the point quickly.

13. Design for the Offer, Not Around It

• If the email is a sale, make the offer clear.
• If the email is educational, make the insight clear.
• If the email is a product launch, make the product clear.

Do not hide a simple offer inside an elaborate concept that requires explanation. Creative design is useful when it improves comprehension, not when it impresses the design team.

14. Keep HTML Lightweight

Oversized HTML can create clipping and rendering problems.

A sensible technical target is to keep email HTML below roughly 100 KB where possible. Do not interpret this as "the total visual email must be 100 KB." Image files are loaded separately. The concern is the underlying HTML email size. The WooCommerce email HTML reference covers the technical detail.

15. Test Across Email Clients

Your email editor preview is not enough. Different clients can render email differently. At minimum QA:

• Gmail
• Apple Mail
• Outlook where relevant
• desktop
• mobile
• dark mode where practical

Check:

• broken layout
• image scaling
• unreadable text
• buttons
• links
• clipping
• footer
• unsubscribe

16. Design and Copy Should Be Built Together

A common bad workflow is:

1. 1A copywriter writes 500 words.
2. 2The designer receives it.
3. 3The designer tries to make all 500 words fit.
4. 4Everyone wonders why the email feels crowded.

Copy and design should solve the same communication problem.

• If the design requires half the copy, cut the copy.
• If a diagram communicates something faster than a paragraph, use the diagram.
• If the message needs almost no visual support, use less design.

17. Reuse Systems, Not Identical Emails

Build modular email sections:

• hero
• product feature
• review
• comparison
• educational block
• CTA
• product recommendations
• footer

Then recombine them. This keeps execution efficient without making every email look identical, and it makes an ecommerce email marketing calendar realistic to run every week. Consistency is good. Visual monotony is not.

18. Test Design Decisions That Could Actually Matter

Useful tests include:

• plain text vs designed
• product-led vs copy-led hero
• one product vs multiple products
• short vs longer copy
• CTA placement
• social proof placement
• design angle
• offer presentation

Testing a button from purple to slightly darker purple is rarely the first place we would spend attention. Design decisions sit inside a wider ecommerce email and SMS marketing system, and how often you send matters at least as much, which is where email frequency and fatigue comes in.

Our Email Design Rule

Before adding any visual element, ask: does this help the customer understand, trust or act?

If yes, keep it. If not, remove it.

Email design is not decoration. It is communication.