HTML & MJML

Order Details Email Template

Deliver flawless post-purchase communication with this Order Details Email Template, purpose-built for eCommerce brands, online retailers, and subscription businesses chasing professionalism at scale. Inside, you'll find itemized product listings, order summaries, shipping tracking modules, and payment breakdowns arranged in a clean, responsive, scannable layout that renders beautifully on any device. It's perfect for order confirmations, shipping notifications, delivery updates, and purchase receipts — the touchpoints customers actually check twice. Marketers, eCommerce managers, and designers can launch it fast with little to no customization needed. The payoff: fewer support tickets, stronger buyer trust, and more repeat purchases from customers who feel informed every step of the way.

Edit In EmailBuilder.ai

About the Order Details Email Template

Every order confirmation is a trust-building moment, and this template turns that moment into a branded experience instead of a bare-bones receipt. Built for eCommerce brands, online retailers, and subscription businesses, it combines itemized product listings, order summaries, shipping trackers, and payment breakdowns into one scannable layout. Customers open order emails more than almost any other message type, so a clear, professional structure here reduces confusion, cuts down support requests, and reinforces confidence in the purchase they just made.

When to use this template

Trigger this email immediately after checkout to confirm the order, then reuse the layout for shipping confirmations and delivery updates as the order progresses. It should fire automatically from your order management or ecommerce platform the instant payment is captured, with follow-up versions sent when tracking numbers are generated or packages ship.

Order confirmation sent instantly after a customer completes checkout online
Shipping notification with tracking link once a warehouse fulfills the order
Subscription box brand confirming monthly billing and itemized contents
Delivery update email alerting customers their package is out for delivery
Digital receipt for customer records showing payment and tax breakdown
Multi-item order summary for retailers shipping products in separate packages

Subject line ideas

Your order is confirmed and on its way
Order #{{order_number}} — here's what's inside
Your package has shipped, track it now
Thanks for your order! Full details inside

Best practices for order emails

Place order number and estimated delivery date above the fold so customers see them instantly
Use a clear visual hierarchy separating itemized products, totals, and shipping info into distinct blocks
Include a prominent tracking button rather than burying the link inside paragraph text
Show product thumbnails next to each line item so buyers instantly recognize their purchase
Repeat support contact info near the footer to preempt order-status questions before they escalate

Template anatomy

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

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

Components used

Built from the following MJML elements:

28 text blocks13 images13 buttons6 dividers5 social links1 social row

Color palette

Colors used across the Order Details Email Template template:

white

#bfbfbf

transparent

#333333

black

#333

#cee8ff

#ffebcd

#000000

#999999

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 Details 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 customers informed and confident with a clear, professional email summarizing their recent order and purchase details
    </mj-preview>
  </mj-head>
  <mj-body background-color="lightgrey">
    <mj-section padding="20px 0px 20px" background-color="white">
      <mj-column>
        <mj-image src="https://cdn.emailbuilder.ai/68509e6904fc27bcbbd459b1/uploads/67cc1dffe12e149017b60112.png" alt="Logo" width="150px" padding="0px">
        </mj-image>
      </mj-column>
    </mj-section>
    <mj-section background-color="#bfbfbf">
      <mj-column vertical-align="top">
        <mj-button background-color="transparent" href="https://emailbuilder.ai" padding="0">
          Electronics
        </mj-button>
      </mj-column>
      <mj-column vertical-align="top">
        <mj-button background-color="transparent" href="https://emailbuilder.ai" padding="0">
          Fashion
        </mj-button>
      </mj-column>
      <mj-column vertical-align="top">
        <mj-button background-color="transparent" href="https://emailbuilder.ai" padding="0">
          Books
        </mj-button>
      </mj-column>
      <mj-column vertical-align="top">
        <mj-button background-color="transparent" href="https://emailbuilder.ai" padding="0">
          Sports
        </mj-button>
      </mj-column>
      <mj-column vertical-align="top">
        <mj-button href="https://emailbuilder.ai" padding="0" background-color="transparent">
          Toys
        </mj-button>
      </mj-column>
    </mj-section>
    <mj-section padding="0" background-color="white">
      <mj-column>
        <mj-text align="center" letter-spacing="20px" font-size="25px">
          ***
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding="0" background-color="white">
      <mj-column>
        <mj-text align="center" color="#333333" padding="0px 0px 0px 0px">
          <h1 style="font-size: 24px; margin-top: 5px;">
            Great news! Your package is on its way.
          </h1>
          <p style="font-size: 14px;">
            Customer account,
            <a href="https://example.com" style="color: #666666;">
              Sarah Johnson
            </a>
            has processed your shipment!
          </p>
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding="10px 10px 10px" background-color="white">
      <mj-column>
        <mj-text align="center" letter-spacing="20px" font-size="25px">
          ***
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding="0px" background-color="white">
      <mj-group>
        <mj-column>
          <mj-text padding="0px" color="#333333" align="center">
            <p>
              Placed
            </p>
            <p>
              on Mar 5
            </p>
          </mj-text>
        </mj-column>
        <mj-column>
          <mj-text padding="0" color="#333333" align="center">
            <p>
              Dispatched
            </p>
            <p>
              on Mar 6
            </p>
          </mj-text>
        </mj-column>
        <mj-column>
          <mj-text padding="0" color="#333333" align="center">
            <p>
              Arriving
            </p>
            <p>
              Mar 8-12
            </p>
          </mj-text>
        </mj-column>
      </mj-group>
    </mj-section>
    <mj-section background-color="white" padding="0">
      <mj-column>
        <mj-button background-color="black" font-size="16px" color="white" border-radius="20px" padding-bottom="0" padding-top="20px" href="https://emailbuilder.ai">
          View Shipment Status
        </mj-button>
        <mj-text align="center" padding-left="20px" padding-right="20px" line-height="20px" padding="0">
          <p>
            Delivery estimates are approximate. If you're having issues with this shipment, please
            <a href="https://emailbuilder.ai" style="color: #000000; font-family: Helvetica, Arial;">
              reach out to the vendor.
            </a>
            View
            <a href="https://emailbuilder.ai" style="color: #000000; font-family: Helvetica, Arial;">
              additional details.
            </a>
          </p>
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="white" padding="15px 0 0">
      <mj-column>
        <mj-divider border-color="#333" border-width="1px" border-style="solid">
        </mj-divider>
      </mj-column>
    </mj-section>
    <mj-section padding="0" background-color="white">
      <mj-column>
        <mj-text align="center" padding="0px">
          <h1 style="font-family: Helvetica, Arial; margin-bottom: 10px;">
            Purchase Information
          </h1>
        </mj-text>
        <mj-text align="center" padding="0">
          <p style="font-family: Helvetica, Arial; margin-top: 3px; margin-bottom: 5px;">
            Reference code:
            <a href="https://example.com" style="color: black;">
              847293156
            </a>
            .
          </p>
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="white">
      <mj-group>
        <mj-column width="33%">
          <mj-image src="https://cdn.emailbuilder.ai/68509e6904fc27bcbbd459b1/uploads/67a62aee6188c04f9b825d98.png" alt="Image" width="100px" padding-top="14px">
          </mj-image>
        </mj-column>
        <mj-column width="63%">
          <mj-text padding="0" line-height="10px">
            <p style="text-align: left; font-family: Helvetica, Arial; font-size: 14px; position: relative;">
              <span style="text-decoration: underline;">
                Classic Denim Jacket
              </span>
              <strong>
                <span style="font-weight: bold; position: absolute; right: 20px;">
                  45.00
                </span>
              </strong>
            </p>
            <p style="text-align: left; font-family: Helvetica, Arial;">
              Order ID: 4829571632
            </p>
            <p style="text-align: left; font-family: Helvetica, Arial;">
              Quantity: 1
            </p>
            <p style="text-align: left; font-family: Helvetica, Arial; line-height: 15px;">
              Returns and exchanges accepted within 30 days of delivery
            </p>
          </mj-text>
        </mj-column>
      </mj-group>
    </mj-section>
    <mj-section background-color="white" padding="0">
      <mj-column padding="0">
        <mj-button background-color="black" font-size="16px" color="white" border-radius="20px" padding="0" href="https://emailbuilder.ai">
          Download invoice
        </mj-button>
      </mj-column>
    </mj-section>
    <mj-section background-color="white" padding="15px 0 0">
      <mj-column>
        <mj-divider border-color="#333" border-width="1px" border-style="solid">
        </mj-divider>
      </mj-column>
    </mj-section>
    <mj-section background-color="white" padding="0">
      <mj-column>
        <mj-text padding="0 0 0 50px" line-height="10px">
          <p style="text-align: left; font-family: Helvetica, Arial; font-weight: bold;">
            Vendor Location
          </p>
          <p style="text-align: left; font-family: Helvetica, Arial; font-size: 14px; position: relative;">
            <a href="https://emailbuilder.ai" style="color: black;">
              <span style="text-decoration: underline;">
                StyleCo Apparel
              </span>
            </a>
          </p>
          <p style="text-align: left; font-family: Helvetica, Arial;">
            NEW YORK, NY
          </p>
        </mj-text>
      </mj-column>
      <mj-column>
        <mj-text padding="0px 0px 0px 50px" line-height="10px">
          <p style="text-align: left; font-family: Helvetica, Arial; font-weight: bold;">
            Delivery Address
          </p>
          <p style="text-align: left; font-family: Helvetica, Arial;">
            Sarah Johnson
          </p>
          <p style="text-align: left; font-family: Helvetica, Arial;">
            789 Maple Street
          </p>
          <p style="text-align: left; font-family: Helvetica, Arial;">
            CHICAGO, IL 60601
          </p>
          <p style="text-align: left; font-family: Helvetica, Arial;">
            United States
          </p>
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="white" padding="10px">
      <mj-column>
        <mj-text align="center" padding-left="20px" padding-right="20px" line-height="8px" padding="0">
          <p>
            This purchase included items from multiple vendors
          </p>
          <p>
            <a href="https://emailbuilder.ai" style="color: #000000; font-family: Helvetica, Arial;">
              View Order history
            </a>
          </p>
          <p style="font-family: Helvetica, Arial; font-size: 11px; color: #000000; padding: 0 20px; line-height: 1.5;">
            Eco-friendly shipping icon We offset carbon emissions from every shipment
          </p>
        </mj-text>
        <mj-divider border-color="#333" border-width="1px" border-style="solid">
        </mj-divider>
      </mj-column>
    </mj-section>
    <mj-wrapper padding="20px" background-color="white">
      <mj-section padding="10px 0px" background-color="#CEE8FF" border-radius="10px">
        <mj-group>
          <mj-column width="33%">
            <mj-image src="https://cdn.emailbuilder.ai/68509e6904fc27bcbbd459b1/uploads/6911b065daee9dea0fc3dcbe.png" alt="Hands Logo" width="50px" padding-top="20px" padding-left="30px">
            </mj-image>
          </mj-column>
          <mj-column width="50%">
            <mj-text padding="0px">
              <p style="font-weight: bold; font-family: Helvetica, Arial; font-size: 14px;">
                Buyer Protection Guarantee
              </p>
              <p style="font-family: Helvetica, Arial; line-height: 1.3">
                This order is covered by our Buyer Protection program. You'll receive a complete refund if your item doesn't arrive, arrives damaged, or doesn't match the description.
              </p>
              <p>
                <a href="https://emailbuilder.ai" style="color: black; text-decoration: underline; font-family: Helvetica, Arial, sans-serif;">
                  Find out more
                </a>
              </p>
            </mj-text>
          </mj-column>
        </mj-group>

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