Shipping Confirmation Email

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

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

Related Email Templates

9 in E-commerce categoryView all →
1–6 of 9
E-commerce

Shipping Confirmation Email

Responsive · Dark mode
Patreon
E-commerce

Abandoned Cart Email

Responsive · Dark mode
Patreon
E-commerce

Back in Stock Email

Responsive · Dark mode
E-commerce

Order Confirmation Email

Responsive · Dark mode
E-commerce

Order Cancellation Email

Responsive · Dark mode
E-commerce

Order Delivered Email

Responsive · Dark mode

Shipping Confirmation Email — Free Responsive HTML Email Template

E-commerce · v1.0.0 · Updated 2026-10-19 · Gmail, Outlook & Apple Mail · Dark mode

CategoryE-commerce
Tagsshipping confirmationorder shippedtrackingecommerceshopifystoretransactionaldark mode
Updated October 16, 2026

What's included

Features

Four-step delivery progress bar built with email-safe tables
Order number, carrier, tracking number and delivery date box
Bulletproof "Track your package" button for Outlook and Gmail
Items in the shipment with quantities
Shipping address with name and multi-line address
Set the current step from 1 (ordered) to 4 (delivered)
Show or hide the progress bar, items and address
Light and dark palettes, both editable
Transactional footer without marketing content
Plain-text version with the tracking link

About this template

Shipping Confirmation Email — Free HTML Order Shipped Template

Shipping Confirmation Email template: An "your order has shipped" email for online stores: a four-step delivery progress bar (ordered, shipped, out for delivery, delivered), carrier, tracking number and estimated delivery, a "Track your package" button, the items in the parcel and the shipping address.

Shipping Confirmation Email is a free, responsive HTML template for telling customers their order is on its way. After the order confirmation, the "your order has shipped" email is the one customers look for most, and they often open it several times while they wait, which makes clear tracking information essential.

What's in the email

A cheerful headline with the customer's first name, a short intro, and a four-step delivery progress bar (ordered, shipped, out for delivery, delivered) that you set to the current step. A details box shows the order number, carrier, tracking number and estimated delivery date, followed by a "Track your package" button, the items in the parcel with quantities and the shipping address. Each section can be switched off.

A progress bar that works in email

Email clients don't support modern CSS, so the progress bar is built from table cells with background colours, which display reliably in Gmail, Apple Mail, Yahoo and Outlook on Windows. The tracking button is an Outlook-safe "bulletproof" button that goes full width on phones. A dark palette, hidden preheader and plain-text version are included.

Send it from your store

Copy the HTML into Shopify's shipping confirmation notification, WooCommerce, Klaviyo, Postmark or your own code and swap the sample values for your platform's variables. Use the same template for "out for delivery" and "delivered" updates by changing the step and the headline. It pairs with the Order Confirmation and Review Request templates for a complete post-purchase flow.

Extend with AI

Take This Email Further With AI

Give this prompt to an AI assistant to write your own version of the Shipping 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:

text
Create a responsive HTML email: “Shipping Confirmation Email”, an e-commerce email.

Purpose: An "your order has shipped" email for online stores: a four-step delivery progress bar (ordered, shipped, out for delivery, delivered), carrier, tracking number and estimated delivery, a "Track your package" button, the items in the parcel and the shipping address.

Inbox text:
- Subject line: “Your order #10482 is on its way”
- Preheader (hidden preview text): “Good news: your package has shipped. Track it any time with the link inside.”

Content, top to bottom:
- Message & button
- Delivery progress
- Items in this shipment
- Shipping address

Headline: “Your order has shipped, {{first_name}}!”. Main button: “Track your package”.
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 #2563eb, 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 Shipping Confirmation Email Template

📦
Fewer "where is my order?" emails
Clear tracking details and a progress bar answer the question before customers contact support, which saves your team time every day.
👀
One of your most-opened emails
Customers check shipping emails again and again. A branded, tidy email builds trust at the moment they are waiting for your product.
⚙
Works in every inbox
The progress bar and button use tables and inline styles, so they hold up in Outlook on Windows as well as Gmail and Apple Mail.

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
    Pick 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.
  2. 2
    Edit the contentFill in the message & button, delivery progress, items in this shipment and shipping address, or click any text in the preview to jump to its field. Switch the delivery progress, items in this shipment and shipping address 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 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

🚚
Order shipped notification
Send it the moment a shipping label is created, with the carrier, tracking number and a button that opens the carrier's tracking page or your own branded tracking page.
🏠
Out for delivery update
Set the progress bar to step 3, change the headline to "Arriving today" and remind the customer that someone may need to be home to sign for the parcel.
✅
Delivered confirmation
Set the progress bar to step 4, thank the customer and link to your returns page or the Review Request email, so the post-purchase flow keeps going.
✂
Split shipments
When an order ships in several parcels, send one email per package and use the items section to list only the products that are in that parcel.

Got questions?

Frequently Asked Questions

The order number, the carrier, the tracking number with a tracking link, the estimated delivery date, what is in the package and where it is going. This template includes all of them, plus a progress bar showing how far the order has got.

In Shopify admin go to Settings, then Notifications, then Shipping confirmation, replace the code with this HTML and swap the sample values for Shopify's Liquid variables, such as the tracking number and tracking URL of the fulfillment.

Yes. It is sent because of a purchase the customer made, so under US CAN-SPAM it doesn't need an unsubscribe link. Keep promotions out, or keep them very small, so it stays transactional.

It is four table cells with background colours and labels, not CSS gradients or flexbox, so Outlook's Word-based renderer shows it correctly. Set the current step in the Delivery progress section.

Yes. Paste any https:// link into the tracking link field: the carrier's page, a branded tracking page from AfterShip or Route, or your own order page.

It saves an editable copy of your Shipping 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.

Design your website