E-commerce Welcome Email

A conversion-focused welcome email template for e-commerce stores. Includes discount code and product highlights.

responsive

dark-mode

discount-code

VARIABLES

Template Variables

Variable	Type	Description	Example
`{{customer_name}}`required	string	The customer's first name	Sarah
`{{store_name}}`required	string	Your store or brand name	Urban Threads
`{{discount_code}}`required	string	Welcome discount code	WELCOME15
`{{discount_percent}}`required	string	Discount percentage	15%
`{{shop_url}}`required	string	URL to your store	https://urbanthreads.com
`{{featured_products}}`	array	Array of featured products with name, image, price, and url	[{"name": "Classic Tee", "image": "...", "price": "$29", "url": "..."}]

CODE

Template Source

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Welcome to {{store_name}}</title>
</head>
<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f4f4f5;">
  <table width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px; margin: 0 auto; padding: 40px 20px;">
    <tr>
      <td style="background-color: #ffffff; border-radius: 8px; overflow: hidden;">
        <!-- Header Banner -->
        <div style="background-color: #09090b; padding: 32px 40px; text-align: center;">
          <h1 style="margin: 0; font-size: 28px; color: #ffffff; font-weight: 700;">
            Welcome to {{store_name}}
          </h1>
        </div>

        <!-- Main Content -->
        <div style="padding: 40px;">
          <p style="margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: #71717a;">
            Hi {{customer_name}},
          </p>
          <p style="margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: #71717a;">
            Thanks for joining our community! We're thrilled to have you. To celebrate, here's a special welcome gift:
          </p>

          <!-- Discount Box -->
          <div style="background-color: #f4f4f5; border-radius: 8px; padding: 24px; text-align: center; margin-bottom: 32px;">
            <p style="margin: 0 0 8px; font-size: 14px; color: #71717a; text-transform: uppercase; letter-spacing: 0.5px;">
              Your Welcome Discount
            </p>
            <p style="margin: 0 0 8px; font-size: 36px; font-weight: 700; color: #09090b;">
              {{discount_percent}} OFF
            </p>
            <div style="display: inline-block; background-color: #09090b; color: #ffffff; padding: 8px 16px; border-radius: 4px; font-family: monospace; font-size: 18px; letter-spacing: 2px;">
              {{discount_code}}
            </div>
          </div>

          <a href="{{shop_url}}" style="display: block; text-align: center; padding: 16px 32px; background-color: #09090b; color: #ffffff; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 16px;">
            Start Shopping
          </a>

          <p style="margin: 32px 0 0; font-size: 14px; color: #a1a1aa; text-align: center;">
            This code is valid for 30 days on orders over $50.
          </p>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

Customization Ideas

Add Product Recommendations

Include bestsellers or new arrivals to drive immediate engagement:

const featuredProducts = [
  { name: 'Classic Tee', image: '...', price: '$29', url: '...' },
  { name: 'Denim Jacket', image: '...', price: '$89', url: '...' },
  { name: 'Canvas Sneakers', image: '...', price: '$65', url: '...' },
];

Personalize by Segment

Customize the template based on how the customer signed up:

Newsletter signup: Focus on content and community
Account creation: Emphasize shopping features
Wishlist creation: Show saved items

A/B Test Ideas

Discount amount: Test 10% vs 15% vs free shipping
Urgency: "Valid for 7 days" vs "Valid for 30 days"
CTA text: "Start Shopping" vs "Claim Your Discount" vs "Browse New Arrivals"
Product grid: With products vs without products

Best Practices

Timing

Send the welcome email immediately after signup. Engagement drops significantly after even a few hours delay.

Mobile Optimization

Over 60% of e-commerce emails are opened on mobile. Test thoroughly on small screens.

Clear Next Steps

Make the primary action (using the discount) crystal clear with a prominent CTA button.