Shipping Notification Template — Four-Stage Progress Rail
Delivery progress as a rail: completed stages filled, the current stage ringed, later stages hollow. State reads by shape as well as colour.
Preview unavailable — view the prompt below.
The prompt
Two ways to build this email in plain language. The fastest is Temway's in-editor assistant — open the chat drawer in the email editor and paste the recipe below. Or connect Claude or ChatGPT via Temway's MCP and paste it there; the agent builds the email step by step. Either way, adapt the copy and colors to your brand.
- An email is a top-to-bottom stack of blocks — the recipe follows that order.
- A
[layout]step becomes a single image (great for heroes); everything else stays live text and links. - Theme the footer to match — the recipe's last step does exactly that.
Want this exact email? Click Use this template below to clone
it into your workspace, then ask the in-editor assistant to rebrand it. Over MCP, tell
your agent to clone the Temway share ze0Cr6VWkwRtlI7FAklU1 and rebrand. For the
full model, point an MCP agent at get_concept — email-structure,
layouts-vs-emails, design-recipes.
“Your order has shipped” answers one question and leaves three. A four-stage rail answers all of them at once: where it is, what already happened, what is next. And because each stage is marked by fill and ring as well as colour, it still reads for someone who cannot distinguish the two greens.
Snapshot
- Goal: show delivery state at a glance, and give the tracking reference in a form that can be copied.
- Audience & tone: a customer waiting on a parcel. Brief and concrete — a status, not a story.
- Palette: page
#e4e7e6· container#f7faf9· text#05110e/#666f6c(muted) · accent#1f6b5a - Font:
Helvetica, Arial, sans-serif - Artwork: one
shipping-tracklayout hero (a single rasterized image), 600×360 — Delivery status as a rail that STOPS at the current stage, with one filled marker where it ends and three tracked stage labels beneath. State is carried by where the line ends, not by colour alone — so it still reads in a monochrome client. Everything below it is native, selectable, clickable.
Build recipe
Each step is one block in the flat stack, top to bottom.
[native]= a real email block.[layout]= a free-form layout embedded as a single image.
- [native] Story title — text. “Order #RS-40912 has shipped.”, fontSize: 20, color
#05110e, left. - [layout] Layout hero —
shipping-track— apply theshipping-tracklayout template (600×360). Delivery status as a rail that STOPS at the current stage, with one filled marker where it ends and three tracked stage labels beneath. State is carried by where the line ends, not by colour alone — so it still reads in a monochrome client. Alt text: “Delivery progress: packed and shipped, now on the way to you.”. - [native] Body copy 1 — text. “Tracking 1Z-994-8F42-0091 — save this in case you need the carrier.”, fontSize: 16, color
#05110e, left. - [native] Primary CTA — button. Label “Track your parcel”, fill
#1f6b5a, color#ffffff, shapeStyle: ‘0_0’, left. - [native] Rule 1 — divider. full-measure rule, 1px, color
#e9e9e9. - [native] Kicker — text. “In this parcel”, fontSize: 14, color
#1f6b5a, left, uppercase. - [native] Body copy 2 — text. “Trail Cap (Olive, M) ×1, Merino Socks (Charcoal) ×2.”, fontSize: 16, color
#05110e, left. - [native] Body copy 3 — text. “Anything missing from this list ships separately with its own tracking.”, fontSize: 16, color
#666f6c, left. - [native] Rule 2 — divider. full-measure rule, 1px, color
#e9e9e9. - [native] Body copy 4 — text. “If you miss the courier, they will leave a card and try again the next working day.”, fontSize: 16, color
#666f6c, left. - [native] Footer rule — divider. short (96px) rule, 1px, color
#e9e9e9. - [native] Footer social — social. Icon row, social.color
#1f6b5a, style circle-outline, center. - [native] Footer address — address. Postal address + unsubscribe, address.color
#666f6c, address.fontFamilyHelvetica, Arial, sans-serif, center.
Make it yours
- Repeat the tracking number as native monospace text. Inside the rasterized rail it cannot be copied, and copying it is the main thing people do with this email.
- Update the current stage per send. A rail permanently stuck on “Packed” is worse than no rail.
- Keep the split-shipment line if you ever ship partial orders — it prevents the most common support ticket this email generates.
About transactional email templates
Transactional email gets the highest open rates of any category, because recipients expect and want it — an order confirmation or shipping update gets read almost every time it lands. That makes it a branding opportunity most teams under-invest in relative to promotional email.
See all transactional templates →Why bother designing a transactional email — isn't the information all that matters?
Transactional emails have the highest open rates of any email you send, because recipients expect and want them — that makes them a real branding opportunity most teams under-invest in relative to promotional email.
What information has to be in an order confirmation email?
Order number, itemized contents, total charged, and expected delivery or next steps at minimum — the order-summary template below leads with those before anything promotional.
Can I add an upsell or review request to a transactional template?
Yes, but keep it secondary — the templates below place the transactional information first and any cross-sell or review ask below the fold, so it never competes with the confirmation itself.
Do these transactional templates work for both order and account-related events?
Yes — the collection below covers order confirmations and shipping updates as well as payment receipts and return confirmations, so both commerce- and account-triggered sends are covered.