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
Responsive · Dark mode
Abandoned Cart Email
Responsive · Dark mode
Back in Stock Email
Responsive · Dark mode
Order Cancellation Email
Responsive · Dark mode
Shipping Confirmation Email
Responsive · Dark mode
Order Delivered Email
Responsive · Dark modeOrder Confirmation Email — Free Responsive HTML Email Template
E-commerce · v1.0.0 · Updated 2026-10-17 · Gmail, Outlook & Apple Mail · Dark mode
What's included
Features
About this template
Order Confirmation Email — Free HTML Ecommerce Template
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.
Extend with AI
Take This Email Further With AI
Give this prompt to an AI assistant to write your own version of the Order Confirmation Email email: draft ten subject lines and preheaders, adapt the copy for a customer segment, translate it, convert it to MJML or React Email, or write the plain-text version. Then paste the result back into the editor above to check it in desktop, mobile and dark mode.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Create a responsive HTML email: “Order Confirmation Email”, an e-commerce email.
Purpose: 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.
Inbox text:
- Subject line: “Order #10482 confirmed”
- Preheader (hidden preview text): “Thanks for your order! Here’s your receipt and what happens next.”
Content, top to bottom:
- Message & button
- Items (leave a name empty to hide it)
- Totals
- Shipping
Headline: “Thanks for your order, {{first_name}}!”. Main button: “View your order”.
Show products with an image, name and price in a grid that stacks on mobile, and make the button the most visible element.
Build it like a professional email developer:
- Table-based layout, 600px wide on desktop and fluid on mobile (width 100%, max-width 600px).
- Inline CSS on every element, with one small style block only for media queries and dark mode (prefers-color-scheme).
- A bulletproof, Outlook-safe call-to-action button (padded table cell with a VML fallback), never an image.
- Colours: brand and button #059669, button text #ffffff, page background #eef0f7. Web-safe font stack with a fallback after the brand font.
- Every image has alt text and explicit width and height. Use PNG icons, never SVG, because Gmail and Outlook drop them.
- Hidden preheader text, a plain-text version, and a legal footer with the postal address, the reason the person is receiving it and a working unsubscribe link.
Finish with a short checklist of what to test in Gmail, Outlook for Windows, Apple Mail, mobile and dark mode.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Why use it
Why Use the Order Confirmation Email Template
How it’s different
How It’s Different From Other Free Email Templates
Step by step
How to Use
- 1Pick your email platformChoose Mailchimp, Klaviyo, HubSpot or Brevo under Merge tags so first names and unsubscribe links export in its syntax, or keep plain {{first_name}} tokens.
- 2Edit 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.
- 3Add your brandUpload or paste your logo, set the brand colour and the light and dark palettes, pick fonts, or apply your saved brand kit.
- 4Preview and checkSwitch between desktop, mobile and dark mode, and fix anything the pre-send checks flag, such as placeholder links or missing alt text.
- 5Export or forkCopy the HTML into Shopify, Klaviyo, Omnisend, Postmark 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
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.