HTML & MJML

Summer Sale Email Template

Supercharge your warm-weather promotions with this Summer Sale email template built for ecommerce brands, retail businesses, and marketing agencies ready to convert seasonal momentum into measurable revenue. Featuring vibrant sun-soaked colors, bold discount callouts, and a clean responsive layout that renders flawlessly across every device, this summer email template is designed to stop scrollers and drive clicks. Use it to launch flash clearance events, promote beachwear or outdoor collections, spotlight beauty bundles, or push limited-time product sale offers before the season ends. Marketers, founders, and email designers alike will love the intuitive structure that minimizes setup time without sacrificing visual impact. Deploy this template and watch your open-to-purchase rates climb as urgency-driven design turns seasonal browsers into loyal buyers.

Edit In EmailBuilder.ai

About the Summer Sale Email Template

Built for ecommerce brands, retailers, and agencies looking to capitalize on peak warm-weather buying intent, this Summer Sale email template combines sun-soaked visuals with conversion-focused structure to turn seasonal interest into real revenue. The bold discount callouts, vibrant color palette, and urgency-driven layout make it ideal for flash sales, clearance pushes, and limited-time summer promotions where standing out in a crowded inbox is half the battle.

When to use this template

Deploy this template between late May and early September when summer shopping intent peaks. Trigger sends around holiday weekends like Memorial Day, Fourth of July, and Labor Day, or use it mid-season to clear inventory before fall. Behavioral triggers like cart abandonment during a summer sale or browse activity on seasonal product pages also make strong send moments.

A swimwear brand launching a limited-time end-of-summer clearance event
An outdoor furniture retailer promoting a July Fourth weekend flash sale
A beauty brand bundling suncare products at a seasonal discount
A marketing agency running a summer campaign for a retail fashion client
A Shopify store owner clearing warm-weather inventory before fall restocking
A sporting goods shop spotlighting summer gear with a countdown-driven offer

Subject line ideas

Summer sale is LIVE — shop before it melts away
Your favorite picks are now up to 50% off ☀️
Last chance: summer deals end at midnight
We picked these summer deals just for you

Best practices for summer emails

Lead with your strongest discount figure in the hero section to immediately anchor perceived value for summer shoppers.
Use warm, high-contrast color pairings like coral and white to reinforce the summer aesthetic without compromising CTA readability.
Add a visible countdown timer or end-date copy to amplify urgency specific to limited-run summer promotions.
Segment your product callouts by summer use case such as beach, travel, or outdoor dining to increase relevance per audience.
Write CTA button copy that reflects the season directly, using phrases like Shop the Summer Edit instead of generic click-here labels.

Template anatomy

How the Summer Sale Email Template template is laid out, top to bottom:

section (1 column) containing spacer.
section (1 column) containing spacer.
section (1 column) containing image.
section (1 column) containing text block.
section (1 column) containing image, text block.
section (1 column) containing text block.
section (1 column) containing button.
section (1 column) containing spacer.
section (1 column) containing spacer.
section (1 column) containing spacer.
section (2 columns) containing image, text block, button.
section (1 column) containing spacer.
section (1 column) containing spacer.
section (1 column) containing spacer.
section (2 columns) containing text block, button, image.
section (1 column) containing spacer.
section (2 columns) containing text block, social row, social link.
section (1 column) containing text block.

Components used

Built from the following MJML elements:

10 text blocks9 spacers4 images3 buttons3 social links1 social row

Color palette

Colors used across the Summer Sale Email Template template:

#f3f8fb

#f76975

#ff0133

#ffffff

#f4c8af

#fff

#555

Typography

Font stacks declared in the template:

system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif

MJML source code

A preview of the MJML markup for the Summer Sale Email Template template. Open it free in EmailBuilder.ai to get the complete source and start customizing.

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-all font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif">
      </mj-all>
    </mj-attributes>
    <mj-title>
      Summer Sale - 25% Off!
    </mj-title>
    <mj-preview>
      Discover great deals in our summer sale - don't miss out on 25% off!
    </mj-preview>
  </mj-head>
  <mj-body background-color="#f3f8fb">
    <mj-section padding="0px 0px 0px 0px" background-color="#f3f8fb">
      <mj-column width="100%" vertical-align="top">
        <mj-spacer height="10px">
        </mj-spacer>
      </mj-column>
    </mj-section>
    <mj-section padding="3px 0px 3px 0px" background-color="#f76975">
      <mj-column width="100%" vertical-align="top">
        <mj-spacer height="10px">
        </mj-spacer>
      </mj-column>
    </mj-section>
    <mj-section padding="3px 0px 3px 0px" background-color="#f76975">
      <mj-column width="100%" vertical-align="top">
        <mj-image padding="10px" src="[[branding.logoURL]]" width="200px">
        </mj-image>
      </mj-column>
    </mj-section>
    <mj-section padding="0px 0px 0px 0px" background-color="#ff0133">
      <mj-column width="100%" vertical-align="top">
        <mj-text align="center" font-size="90px" padding="0px 0px 0px 0px" line-height="1.5" color="#ffffff">
          SUMMER SALE
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding="0px 0px 0px 0px" background-color="#f4c8af">
      <mj-column width="100%" vertical-align="top">
        <mj-image src="https://cdn.emailbuilder.ai/68509e6904fc27bcbbd459b1/uploads/67b32ac5eb21274b51412f68.jpg" padding="0px 0px 0px 0px" width="600px">
        </mj-image>
        <mj-text align="center" font-size="70px" padding="0px 0px 0px 0px" line-height="1.5" color="#ff0133" font-weight="bold">
          <div>
            25% OFF
          </div>
        </mj-text>
        <mj-text align="center" font-size="40px" padding="0px 0px 0px 0px" line-height="1.5" color="#ff0133">
          Coupon&nbsp;code:
          <b>
            summer2029
          </b>
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding="0px 0px 0px 0px" background-color="#f4c8af">
      <mj-column width="100%" vertical-align="top">
        <mj-text align="center" font-size="11px" padding="0px 0px 0px 0px" line-height="1.5">
          <p>
            <span style="font-size:16px;">
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
              <br>
                Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Etiam neque.
                <br>
                  Ut enim ad minim veniam.
                </span>
              </p>
            </mj-text>
          </mj-column>
        </mj-section>
        <mj-section padding="0px 0px 0px 0px" background-color="#f4c8af">
          <mj-column width="100%" vertical-align="top">
            <mj-button align="center" background-color="#ff0133" color="#fff" border-radius="none" font-size="17px" padding="20px 20px 20px 20px" inner-padding="12px 34px" href="https://emailbuilder.ai" border="0px solid #000">
              SHOP NOW
            </mj-button>
          </mj-column>
        </mj-section>
        <mj-section padding="3px 0px 3px 0px" background-color="#f76975">
          <mj-column width="100%" vertical-align="top">
            <mj-spacer height="10px">
            </mj-spacer>
          </mj-column>
        </mj-section>
        <mj-section padding="0px 0px 0px 0px" background-color="#f3f8fb">
          <mj-column width="100%" vertical-align="top">
            <mj-spacer height="10px">
            </mj-spacer>
          </mj-column>
        </mj-section>
        <mj-section padding="1px 0px 1px 0px" background-color="#f4c8af">
          <mj-column width="100%" vertical-align="top">
            <mj-spacer height="10px">
            </mj-spacer>
          </mj-column>
        </mj-section>
        <mj-section padding="0px 0px 0px 0px" background-color="#f3f8fb">
          <mj-column width="50%" vertical-align="top">
            <mj-image src="https://cdn.emailbuilder.ai/68509e6904fc27bcbbd459b1/uploads/67b32b40eb21274b5141302d.jpg" padding="20px 0px 0px 0px">
            </mj-image>
          </mj-column>
          <mj-column width="50%" vertical-align="top">
            <mj-text align="center" font-size="11px" padding="75px 40px 40px 40px" line-height="1.5">
              <p>
                <br>
                  <span style="font-size: 30px;">
                    <strong>
                      <span style="line-height: 107%;">
                        Lorem ipsum
                        <br>

Want the full MJML?Open Summer Sale Email Template free in the editor to copy the complete, production-ready source — and customize it with drag-and-drop.Get the full MJML — it's free