HTML & MJML

Order Confirmation Email Template

Elevate every post-purchase moment with this order confirmation email template built for eCommerce brands, online retailers, subscription services, and digital marketplaces. The responsive layout features structured sections for itemized order details, pricing summaries, shipping timelines, and support contacts — all styled with a clean, conversion-focused design. Use it to confirm product purchases, subscription renewals, service bookings, or digital deliveries with effortless clarity. Marketers, eCommerce managers, and founders can customize this order email template in minutes to reflect their brand. The result: stronger customer trust, fewer support tickets, and a polished confirmation experience that drives repeat purchases.

Edit In EmailBuilder.ai

About the Order Confirmation Email Template

Sent within seconds of a completed purchase, the order confirmation email is one of the highest-opened messages in all of eCommerce — and this template makes every pixel count. Built for online retailers, subscription brands, and digital marketplaces, it structures order details, pricing breakdowns, and shipping timelines into a clean, scannable layout that reassures buyers instantly and reduces post-purchase anxiety before it starts.

When to use this template

Trigger this email immediately upon successful payment or order placement — ideally within 60 seconds of checkout completion. For subscription services, send it at every renewal cycle. For digital products, pair it with instant delivery confirmation. Speed and accuracy at this moment directly impact customer trust and long-term retention.

A Shopify apparel brand confirming a multi-item order with size and color details
A SaaS platform notifying users of a successful annual subscription renewal
A digital course marketplace delivering purchase confirmation alongside instant access links
A meal kit delivery service confirming a weekly box with itemized ingredient selections
A B2B software vendor confirming a seat-based license purchase with invoice summary
A ticketing platform confirming event bookings with date, seat, and venue information

Subject line ideas

Your order is confirmed — here are the details
Order #[12345] received — we're on it
Your [Brand] purchase is locked in
Good news: your order just went through

Best practices for order emails

Lead with the order number in large text so customers can scan and reference it instantly without searching.
Include a realistic shipping window — a specific date range outperforms vague phrases like 'ships soon' every time.
Add a single, prominent support link or email directly below the order summary to preempt WISMO tickets.
Use itemized product rows with thumbnail images, quantities, and unit prices to mirror the cart experience customers remember.
Close with a soft cross-sell or loyalty nudge tied to the purchased category — not a generic promo, a contextual one.

Template anatomy

How the Order Confirmation Email Template template is laid out, top to bottom:

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

Components used

Built from the following MJML elements:

35 text blocks6 images5 dividers4 social links1 button1 social row

Color palette

Colors used across the Order Confirmation Email Template template:

#f5f5f5

#ffffff

#2c3e50

#7f8c8d

#e0e0e0

#34495e

#27ae60

#3498db

#ecf0f1

#3b5998

#1da1f2

#e4405f

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 Order Confirmation 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-image padding="0">
      </mj-image>
    </mj-attributes>
    <mj-preview>
      Keep your customers informed with a clear and professional order summary
    </mj-preview>
  </mj-head>
  <mj-body background-color="#f5f5f5">
    <mj-section padding="30px 20px" background-color="#ffffff">
      <mj-column>
        <mj-image src="https://cdn.emailbuilder.ai/68509e6904fc27bcbbd459b1/uploads/67cc1dffe12e149017b60112.png" alt="Company Logo" width="180px" padding="0px">
        </mj-image>
      </mj-column>
    </mj-section>
    <mj-section padding="20px" background-color="#ffffff">
      <mj-column>
        <mj-text align="center" font-size="28px" font-weight="bold" color="#2c3e50" padding="0px 0px 20px">
          Order Confirmation
        </mj-text>
        <mj-text align="center" font-size="16px" color="#7f8c8d" padding="0px">
          Thank you for your purchase! Your order has been confirmed and is being processed.
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding="0px 20px" background-color="#ffffff">
      <mj-column>
        <mj-divider border-color="#e0e0e0" border-width="2px">
        </mj-divider>
      </mj-column>
    </mj-section>
    <mj-section padding="30px 20px" background-color="#ffffff">
      <mj-column>
        <mj-text font-size="18px" font-weight="bold" color="#2c3e50" padding="0px 0px 15px">
          Order Summary
        </mj-text>
        <mj-text font-size="14px" color="#34495e" padding="5px 0px">
          <strong>
            Order Number:
          </strong>
          #ORD-847293
        </mj-text>
        <mj-text font-size="14px" color="#34495e" padding="5px 0px">
          <strong>
            Order Date:
          </strong>
          March 15, 2025
        </mj-text>
        <mj-text font-size="14px" color="#34495e" padding="5px 0px">
          <strong>
            Payment Method:
          </strong>
          Credit Card ending in 4567
        </mj-text>
        <mj-text font-size="14px" color="#34495e" padding="5px 0px">
          <strong>
            Total Amount:
          </strong>
          $127.50
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding="0px 20px" background-color="#ffffff">
      <mj-column>
        <mj-divider border-color="#e0e0e0" border-width="1px">
        </mj-divider>
      </mj-column>
    </mj-section>
    <mj-section padding="30px 20px" background-color="#ffffff">
      <mj-column>
        <mj-text font-size="18px" font-weight="bold" color="#2c3e50" padding="0px 0px 20px">
          Items Ordered
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding="0px 20px 20px" background-color="#ffffff">
      <mj-group>
        <mj-column width="25%">
          <mj-image src="https://cdn.emailbuilder.ai/68509e6904fc27bcbbd459b1/uploads/690b4def7de2165b1367cc64.avif" alt="Product Image" width="120px" padding="20px">
          </mj-image>
        </mj-column>
        <mj-column width="75%" padding="10px">
          <mj-text font-size="16px" font-weight="bold" color="#2c3e50" padding="0px 0px 10px">
            Premium Wireless Headphones
          </mj-text>
          <mj-text font-size="14px" color="#7f8c8d" padding="5px 0px">
            Model: WH-2024 | Color: Black
          </mj-text>
          <mj-text font-size="14px" color="#7f8c8d" padding="5px 0px">
            Quantity: 1
          </mj-text>
          <mj-text font-size="16px" font-weight="bold" color="#27ae60" padding="10px 0px 0px">
            $89.99
          </mj-text>
        </mj-column>
      </mj-group>
    </mj-section>
    <mj-section padding="0px 20px 20px" background-color="#ffffff">
      <mj-group>
        <mj-column width="25%">
          <mj-image src="https://cdn.emailbuilder.ai/68509e6904fc27bcbbd459b1/uploads/67e47f8f17c0ed5f45aa9002.avif" alt="Product Image" width="120px" padding="20px">
          </mj-image>
        </mj-column>
        <mj-column width="75%" padding="10px">
          <mj-text font-size="16px" font-weight="bold" color="#2c3e50" padding="0px 0px 10px">
            Smartphone Case - Premium Leather
          </mj-text>
          <mj-text font-size="14px" color="#7f8c8d" padding="5px 0px">
            Compatible with iPhone 15 Pro | Color: Brown
          </mj-text>
          <mj-text font-size="14px" color="#7f8c8d" padding="5px 0px">
            Quantity: 1
          </mj-text>
          <mj-text font-size="16px" font-weight="bold" color="#27ae60" padding="10px 0px 0px">
            $37.51
          </mj-text>
        </mj-column>
      </mj-group>
    </mj-section>
    <mj-section padding="0px 20px" background-color="#ffffff">
      <mj-column>
        <mj-divider border-color="#e0e0e0" border-width="1px">
        </mj-divider>
      </mj-column>
    </mj-section>
    <mj-section padding="20px" background-color="#ffffff">
      <mj-column>
        <mj-text align="right" font-size="14px" color="#34495e" padding="5px 0px">
          Subtotal: $127.50
        </mj-text>
        <mj-text align="right" font-size="14px" color="#34495e" padding="5px 0px">
          Shipping: $0.00
        </mj-text>
        <mj-text align="right" font-size="18px" font-weight="bold" color="#2c3e50" padding="10px 0px 0px">
          Total: $127.50
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding="0px 20px" background-color="#ffffff">
      <mj-column>

Want the full MJML?Open Order Confirmation 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