Website kits
Product order thank-you page
Order confirmation page: what happens next as four shipping steps, care tips, a share-by-email prompt and support contacts with an email button.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page buyers see straight after paying, and the place to record an ad conversion. It answers the questions that otherwise arrive by email in the first week: did my order go through, when will it ship, how will I know where it is. So it opens with the confirmation and a note about the receipt email, then four steps from order to delivery with realistic timings. Care tips come next because the bottle is about to arrive and first use is when habits form. The share panel asks for a recommendation while the buyer is at their most enthusiastic, and the support section closes with a clear way to reach a person. Rewrite the shipping steps to match your real packing days and carrier first. Point your checkout’s success or return URL here and fire your ad conversion only on this page, then keep it out of search results so the conversion count is not inflated by visits from search.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 17
- Container (grid) × 3
- Container (grid, 4 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 13
- Button × 3
- Heading × 5
- Image × 1
- Icon Box × 4
- Icon List × 2
Things worth knowing
- The four shipping steps convert to Icon Box widgets with check, redo, arrow and circle icons. The timing sits in each heading rather than in a step number, because a number beside the icon would stop the card qualifying as an Icon Box.
- The care tips and the three contact lines become two Icon List widgets.
- Share by email, Need help? and Email customer care convert to Button widgets with their mailto: links kept, including the prefilled subject and body of the share link; replace example.com with your landing page URL.
- The page shows no order data of its own — no order number or items — so it works as the success URL of any checkout, from a Stripe Payment Link to a WooCommerce redirect. The box photo becomes an Image widget with an empty slot, and below 780px all rows stack.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Thank you for your order — Fennick</title>
<style>
body{margin:0;font-family:'Figtree',Helvetica,Arial,sans-serif;color:#1c1d20;background:#f4f2ee}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:#1c1d20;font-weight:600}
h1{font-size:52px;line-height:1.08;letter-spacing:-.025em;margin:0 0 18px}
h2{font-size:36px;line-height:1.15;letter-spacing:-.015em;margin:0 0 14px}
h3{font-size:20px;line-height:1.3;margin:0 0 8px}
p{font-size:17px;line-height:1.75;color:#6a6c70;margin:0 0 18px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#1c1d20;margin:0 0 14px}
.buy{display:inline-block;padding:15px 28px;border-radius:6px;background:#d99a1e;color:#1c1d20;text-decoration:none;font-weight:700;font-size:16px}
.ghost{display:inline-block;padding:14px 26px;border-radius:6px;border:1px solid #1c1d20;color:#1c1d20;text-decoration:none;font-weight:700;font-size:16px}
.top{background:#f4f2ee;border-bottom:1px solid #e4e1db}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.logo{margin:0;font-family:'Fraunces',Georgia,serif;font-size:24px;font-weight:600;letter-spacing:-.01em;color:#1c1d20}
.logo a{color:#1c1d20;text-decoration:none}
.top-help{display:inline-block;padding:9px 18px;border-radius:6px;border:1px solid #1c1d20;color:#1c1d20;text-decoration:none;font-weight:700;font-size:15px}
.intro{padding:56px 0 80px}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center}
.photo{width:100%;height:420px;object-fit:cover;border-radius:10px;display:block;background:#e4e1db}
.note{padding:18px 22px;border-left:3px solid #d99a1e;background:#e4e1db;border-radius:0 10px 10px 0}
.note p{margin:0;font-size:16px;color:#1c1d20}
.white{background:#ffffff}
.head{max-width:660px;margin:0 0 40px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.step{padding:28px 24px;border-radius:10px;border:1px solid #e4e1db;background:#f4f2ee}
.s-icon{display:inline-block;color:#d99a1e;font-size:22px;line-height:1;margin:0 0 14px}
.step h3{font-size:19px}
.step p{font-size:15px;line-height:1.65;margin:0}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}
.panel{padding:36px 34px;border-radius:10px;background:#ffffff;border:1px solid #e4e1db}
.panel h2{font-size:30px}
.tips{display:flex;flex-direction:column;gap:12px}
.tips > div{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.55;color:#1c1d20}
.tick{color:#d99a1e;font-size:14px;line-height:1.7}
.share{background:#1c1d20;border-color:#1c1d20}
.share h2{color:#ffffff}
.share p{color:#e4e1db}
.share .eyebrow{color:#d99a1e}
.share .buy{margin-top:6px}
.support{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.contact{display:flex;flex-direction:column;gap:12px;margin:0 0 28px}
.contact > div{display:flex;gap:12px;align-items:center;font-size:17px;color:#1c1d20}
.foot{background:#f4f2ee;border-top:1px solid #e4e1db}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
.foot p{margin:0;font-size:14px;color:#6a6c70}
.foot a{color:#1c1d20}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.intro{padding:28px 0 56px}
.split,.steps,.two,.support{grid-template-columns:minmax(0,1fr);gap:24px}
h1{font-size:36px}
h2{font-size:28px}
.panel{padding:28px 22px}
.panel h2{font-size:26px}
.photo{height:260px}
.logo{font-size:21px}
.top-help{padding:8px 12px;font-size:14px}
.foot .wrap{flex-direction:column;align-items:flex-start;gap:6px}
}
</style>
</head>
<body>
<header class="top">
<div class="wrap">
<p class="logo"><a href="/">Fennick</a></p>
<a class="top-help" href="mailto:[email protected]">Need help?</a>
</div>
</header>
<section class="intro">
<div class="wrap split">
<div>
<p class="eyebrow">Order confirmed</p>
<h1>Thank you — your bottle is on its way soon</h1>
<p>We have emailed your receipt to the address you used at checkout. It includes your order number, which is the quickest way for us to find your order if you write to us.</p>
<div class="note">
<p>No email after ten minutes? Check your spam folder, then write to [email protected] and we will resend it.</p>
</div>
</div>
<img class="photo" src="https://htmltoelementor.com/wp-content/uploads/hte-library/product/bottle-box.jpg" width="1600" height="1000" alt="Flat lay of the bottle beside its plain paper box, a spare silicone gasket and a small bottle brush">
</div>
</section>
<section class="white">
<div class="wrap">
<div class="head">
<p class="eyebrow">What happens next</p>
<h2>From our shelf to your door</h2>
<p>Times are for US orders. Canadian orders usually take 5–8 business days after shipping.</p>
</div>
<div class="steps">
<div class="step"><span class="s-icon">✓</span><h3>Today: order received</h3><p>Your payment is confirmed and the order is in our packing queue. You can still change the address by replying to the receipt.</p></div>
<div class="step"><span class="s-icon">↻</span><h3>1–2 days: packed</h3><p>We pack orders on weekdays in Brookvale, Ohio. Orders placed after 2 pm on Friday are packed on Monday.</p></div>
<div class="step"><span class="s-icon">→</span><h3>Shipped: tracking sent</h3><p>A second email arrives with the carrier and tracking link as soon as the parcel leaves the warehouse.</p></div>
<div class="step"><span class="s-icon">●</span><h3>3–5 days: delivered</h3><p>Most parcels arrive within five business days of shipping. No signature is needed.</p></div>
</div>
</div>
</section>
<section>
<div class="wrap two">
<div class="panel">
<p class="eyebrow">When it arrives</p>
<h2>Four habits for a bottle that lasts</h2>
<div class="tips">
<div><span class="tick">✓</span><span>Wash it with warm soapy water before the first fill.</span></div>
<div><span class="tick">✓</span><span>For ice that lasts all day, pre-chill it with cold water for five minutes.</span></div>
<div><span class="tick">✓</span><span>Hand-wash the body; only the cap goes in the dishwasher.</span></div>
<div><span class="tick">✓</span><span>Pull the gasket out weekly and let it dry before refitting.</span></div>
</div>
</div>
<div class="panel share">
<p class="eyebrow">Tell a friend</p>
<h2>Know someone who keeps losing water bottles?</h2>
<p>Most of our customers find us because someone showed them theirs. If you think a friend would like one, the button below opens an email with a link to the bottle, ready to send.</p>
<a class="buy" href="mailto:?subject=A%20water%20bottle%20I%20think%20you%20would%20like&body=I%20just%20ordered%20one%20of%20these%3A%20https%3A%2F%2Fexample.com%2F">Share by email</a>
</div>
</div>
</section>
<section class="white">
<div class="wrap support">
<div>
<p class="eyebrow">Support</p>
<h2>Something not right with your order?</h2>
<p>Wrong address, a missing parcel or a bottle that arrived dented — write to us with your order number and a photo if it helps. A person reads every message and you will hear back within one business day.</p>
</div>
<div>
<div class="contact">
<div><span class="tick">→</span><span>[email protected]</span></div>
<div><span class="tick">→</span><span>(555) 014-7731, Mon–Fri 9 am–5 pm ET</span></div>
<div><span class="tick">→</span><span>Returns within 60 days, prepaid label included</span></div>
</div>
<a class="ghost" href="mailto:[email protected]">Email customer care</a>
</div>
</div>
</section>
<footer class="foot">
<div class="wrap">
<p>© 2026 Fennick Goods, 88 Tannery Lane, Brookvale, OH</p>
<p><a href="/our-story/">Our story</a> · Shipping · Returns · Privacy</p>
</div>
</footer>
</body>
</html>
