HTML & MJML

Refer a Friend Offer Email Template

Turn happy customers into a growth channel with this refer-a-friend offer email template built for ecommerce stores, subscription services, and DTC brands. The give-$20-get-$20 framing makes the double-sided incentive instantly clear, a warm lifestyle hero keeps the tone friendly rather than transactional, and a simple three-step explainer removes every question before it's asked. Ideal for referral program launches, ambassador invitations, and post-purchase advocacy campaigns. Responsive MJML layout — adjust reward amounts, copy, and colors in minutes.
Edit In EmailBuilder.ai
Share:
Refer a Friend Offer Email Template - email template preview
Show full preview ▼

About the Refer a Friend Offer Email Template

Referral programs live or die by how clearly they communicate the reward — and this template nails the double-sided incentive in a single glance. Built for ecommerce stores, DTC brands, and subscription services, it pairs a give-$20-get-$20 structure with a warm lifestyle hero and a three-step explainer that removes friction before customers even think to hesitate. The result is a referral email that feels like a favor, not a pitch.

When to use this template

Deploy this template 24–48 hours after a confirmed purchase, when satisfaction is highest and advocacy intent peaks. It also performs well after a positive review submission, a loyalty milestone, or at the start of a seasonal referral push when you want to accelerate word-of-mouth acquisition fast.
  • A skincare DTC brand launching its first formal referral rewards program
  • A subscription box service inviting its most loyal customers as brand ambassadors
  • An online apparel store running a post-holiday referral push to recapture momentum
  • A SaaS-adjacent ecommerce brand rewarding customers who refer friends during a product launch
  • A health and wellness brand sending referral invites after a five-star review submission
  • A specialty food retailer activating repeat buyers to share a limited-time double-reward event

Subject line ideas

  • Give $20, get $20 — share the love today
  • Your friends want in. Here's $20 to invite them.
  • A little gift for you and someone you know
  • Last chance: your referral reward expires soon

Best practices for discount emails

  • Lead with the recipient's reward first — 'get $20' before 'give $20' — to hook self-interest immediately before the altruistic ask.
  • State the exact dollar amounts in the hero headline rather than vague language like 'earn rewards' to eliminate any ambiguity about value.
  • Keep the three-step explainer to single-line descriptions so the process reads as effortless, not instructional or time-consuming.
  • Use a single, high-contrast CTA button with action-oriented copy like 'Share Your Link' rather than passive alternatives like 'Learn More'.
  • Personalize the sender name to a real team member or founder so the referral invite reads as a warm recommendation, not a mass campaign.

Template anatomy

How the Refer a Friend Offer Email Template template is laid out, top to bottom:
  1. section (1 column) containing text block.
  2. section (1 column) containing image.
  3. section (1 column) containing text block, button.
  4. section (1 column) containing text block.
  5. section (3 columns) containing text block.
  6. section (1 column) containing text block, button.
  7. section (1 column) containing social row, social link, text block.

Components used

Built from the following MJML elements:
17 text blocks3 social links2 buttons1 image1 social row

Color palette

Colors used across the Refer a Friend Offer Email Template template:
#eef2ff
#ffffff
#3730a3
#111827
#4b5563
#6b7280
#1e1b4b
#c7d2fe
#818cf8

Typography

Font stacks declared in the template:
  • Helvetica, Arial, sans-serif

MJML source code

A preview of the MJML markup for the Refer a Friend Offer Email Template template. Open it free in EmailBuilder.ai to get the complete source and start customizing.
<mjml>
  <mj-head>
    <mj-title>Refer a Friend Offer Email Template</mj-title>
    <mj-attributes>
      <mj-all font-family="Helvetica, Arial, sans-serif"></mj-all>
      <mj-text font-size="14px" line-height="24px"></mj-text>
    </mj-attributes>
    <mj-preview>Give a friend $20, get $20 back — everybody wins</mj-preview>
  </mj-head>
  <mj-body background-color="#EEF2FF" width="600px">
    <mj-section background-color="#FFFFFF" padding="28px 36px 20px 36px">
      <mj-column>
        <mj-text color="#3730A3" font-size="20px" letter-spacing="3px" align="center" padding="0px"><strong>SUNDAYS</strong></mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#FFFFFF" padding="0px">
      <mj-column>
        <mj-image src="https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?ixid=M3w4NzY5MzJ8MHwxfHNlYXJjaHwyfHxmcmllbmRzJTIwbGF1Z2hpbmclMjB0b2dldGhlciUyMGhhcHB5fGVufDB8MHx8fDE3ODMzNDk3NTl8MA&ixlib=rb-4.1.0&w=1200&h=560&fit=crop&auto=format&q=80" alt="Friends sharing a laugh" fluid-on-mobile="true" padding="0px"></mj-image>
      </mj-column>
    </mj-section>
    <mj-section background-color="#FFFFFF" padding="36px 40px 0px 40px">
      <mj-column>
        <mj-text color="#3730A3" font-size="14px" letter-spacing="4px" align="center" padding="0px 0px 12px 0px"><strong>GOOD THINGS ARE BETTER SHARED</strong></mj-text>
        <mj-text color="#111827" font-size="46px" line-height="54px" align="center" padding="0px"><strong>Give $20.
Get $20.</strong></mj-text>
        <mj-text color="#4B5563" font-size="16px" align="center" padding="16px 16px 0px 16px">Share your link with a friend. They get $20 off their first order — and $20 lands in your account the moment they buy.</mj-text>
        <mj-button href="https://example.com" background-color="#3730A3" color="#FFFFFF" font-size="16px" border-radius="8px" inner-padding="16px 48px" padding="26px 0px 36px 0px"><strong>Share My Link →</strong></mj-button>
      </mj-column>
    </mj-section>
    <mj-section background-color="#EEF2FF" padding="32px 36px 8px 36px">
      <mj-column>
        <mj-text color="#111827" font-size="22px" align="center" padding="0px"><strong>Three steps, two rewards</strong></mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#EEF2FF" padding="16px 24px 36px 24px">
Want the full MJML?Open Refer a Friend Offer 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

Browse more templates

Discount Email TemplatesOffer Email TemplatesReferral Email TemplatesE-commerce Email TemplatesAll Email Templates

Similar discount templates