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
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.
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
- 1Set 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.
- 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 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
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.


