Order Confirmation Email

v1.0.0

Click any text to edit it right here · click an image or link to jump to its setting

  • Replace the placeholder links: Header link, Button link, Help centre link.

Order Confirmation Email — Free Responsive HTML Email Template

Transactional · v1.0.0 · Updated 2026-10-17 · Gmail, Outlook & Apple Mail · Dark mode

Tagsorder confirmationecommerceshopifystorepaymenttransactionaldark mode
Updated October 16, 2026

What's included

Features

Order number and date in a summary box at the top
Up to three line items with details, quantity and right-aligned price
Subtotal, discount, shipping, tax and a bold total
"Paid with" line for the payment method
Shipping address, shipping method and estimated delivery, stacking on phones
Outlook-safe "View your order" button
Closing note for returns policy and support
Editable light and dark palettes, hidden preheader and plain-text version
Easy to map to Shopify Liquid, WooCommerce, Klaviyo or your own code
Copy the HTML, download a .html or ZIP file, or fork it to My Code

About this template

Order Confirmation Email — Free HTML Ecommerce Template

Order Confirmation Email template: An ecommerce order confirmation email: a thank-you headline, order number and date, up to three line items with quantity and price, subtotal, shipping, tax and total, the shipping address, an estimated delivery date and an Outlook-safe "View order" button.

Order Confirmation Email is a free, responsive HTML order confirmation template for online stores, Shopify and WooCommerce shops, marketplaces and DTC brands. It thanks the customer, shows the order number and date, lists up to three items with details, quantity and price, adds subtotal, discount, shipping, tax and total, shows the payment method, the shipping address and an estimated delivery window, and links to the order with an Outlook-safe button.

The most-read email a store sends

Customers open order confirmations almost every time, often more than once while they wait for a parcel. A clear confirmation cuts "where is my order?" emails and builds trust right after someone has paid. This template puts the information people look for first, the order number, what they bought and when it arrives, at the top.

Line items that hold together

Each item has a name, a details line (size, colour, variant), quantity and price, set in a two-column table that keeps prices aligned on the right in every client, including Outlook. Leave an item name empty to hide that row. The order number and date sit in a soft summary box, and the shipping and delivery columns stack on phones.

Coded for real inboxes

Nested tables, inline styles, a VML button for Outlook on Windows, a dark palette for Apple Mail, iOS and Outlook.com, a hidden preheader and a plain-text version are all built in. The total is set in bold so it is easy to find.

Transactional, not marketing

Order confirmations are transactional email, so an unsubscribe link isn't required. Keep promotions out of the main content so it stays that way, and use the closing note for your returns policy and a "just reply" support line.

Edit the sample data in the browser, then replace it with your platform's variables (Shopify Liquid, Klaviyo, WooCommerce or your own code). Next in the flow, send a Payment Receipt, or welcome first-time buyers with the Welcome Email.

Why use it

Why Use the Order Confirmation Email Template

📦
Fewer "where's my order?" emails
Showing the order number, items and delivery window up front answers the questions customers would otherwise email you.
🧾
Totals that line up
Table-based line items keep prices aligned in Gmail, Apple Mail and Outlook, so the order looks as professional as your store.
◐
Your brand, not the platform's
Replace the plain default confirmation from your store platform with one in your colours, fonts and tone.

How it’s different

How It’s Different From Other Free Email Templates

</>
Real email HTML you own
Not a locked design inside a sending platform. Copy production-ready HTML, download a .html file or fork it into My Code, and use it with any email service or your own code.
⚙
Coded for real inboxes
Tables, inline styles, Outlook conditional comments, a VML button and Outlook font fixes. Many free templates only look right in a browser.
◐
Dark mode built in
Separate, editable light and dark palettes, with a dark preview, instead of leaving dark mode to each email client.
✓
Checks before you send
Warnings for Gmail clipping, missing alt text, placeholder links, images that aren't hosted online, and a missing unsubscribe link or postal address.
Plain-text version included
A matching plain-text version is generated as you edit, ready for multipart emails and the clients and filters that read text.
◍
Free and private
No account, no watermark and no limits. Everything runs in your browser, and your edits are saved locally for next time.

Step by step

How to Use

  1. 1
    Set the inbox detailsWrite the sender name, subject line and preheader (the preview text shown next to the subject in the inbox). The character counts show when they get too long for phones.
  2. 2
    Edit the contentFill in the message & button, items, totals and shipping, or click any text in the preview to jump to its field. Switch the shipping on or off.
  3. 3
    Add your brandUpload or paste your logo, set the brand colour and the light and dark palettes, pick fonts, or apply your saved brand kit.
  4. 4
    Preview and checkSwitch between desktop, mobile and dark mode, and fix anything the pre-send checks flag, such as placeholder links or missing alt text.
  5. 5
    Export or forkCopy the HTML into Postmark, SendGrid, Amazon SES, Resend or your own code, copy the plain-text version, download a ZIP with images, or fork it into My Code.

Real-world uses

Common Use Cases

🛍
Shopify or WooCommerce store
Replace the default order confirmation with your own design, then swap the sample items and totals for your platform's order variables and loop over every line item.
🍽
Food and meal-kit orders
Confirm what is in the box, show the delivery day instead of a shipping window, and use the closing note for allergy information and how to skip a week.
🎟
Event tickets and bookings
List ticket types and quantities as items, use the shipping section for the venue and date, and link the button to the tickets in the customer's account.
💻
Digital products and downloads
Hide the shipping section, list the files or licences purchased, and point the button to the download page so customers can get their product straight away.

Got questions?

Frequently Asked Questions

In your store platform or sending code, repeat the item row once per product. Fork the template to My Code or copy the HTML and wrap one item row in your platform's loop, for example {% for line in order.line_items %} in Shopify Liquid.

Yes. In Shopify admin go to Settings > Notifications > Order confirmation, then replace the code with this HTML and swap the sample values for Liquid variables such as {{ order_name }}, {{ line.title }} and {{ total_price | money }}.

Yes. It's sent because the customer placed an order, so it doesn't need an unsubscribe link under US CAN-SPAM. Adding a small product recommendation is common, but the main purpose must stay the order.

The order number and date, what was bought with prices, the total and payment method, where it is shipping, when it should arrive, how to see the order and how to get help. This template has every one.

Yes. Items and totals are table cells with right-aligned prices and no-wrap, which Outlook's Word-based renderer handles reliably.

It saves an editable copy of your Order Confirmation Email in My Code, the UI Snippets code editor: the email markup goes in the HTML panel and its CSS (mobile and dark-mode rules plus fonts) in the CSS panel, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial email, with no sign-up and no watermark. Everything runs in your browser, and your edits are saved locally.