hform/pages

Handmade product page template

A product page for handmade goods, shown here with a hand-poured candle. Handmade buyers pay for the story as much as the object — this layout gives the making process room to breathe next to the practical details.

The page

Customize in the generator → Copied ✓
View the HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sea Salt &amp; Sage — hand-poured soy candle — $24</title>
<meta name="description" content="Small-batch, 40-hour burn, poured in our own workshop.">
<meta property="og:type" content="product">
<meta property="og:title" content="Sea Salt &amp; Sage — hand-poured soy candle">
<meta property="og:description" content="Small-batch, 40-hour burn, poured in our own workshop.">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Sea Salt & Sage — hand-poured soy candle",
  "description": "Poured by hand in small batches on the coast, this candle fills a room without overpowering it. The amber jar is made to be kept — rinse it out and it becomes a planter, a pen cup, a home for small things.",
  "offers": {
    "@type": "Offer",
    "price": "24",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  },
  "image": "https://hform.com/img/hand-poured-soy-candle-amber-jars.jpg"
}
</script>
<style>
  :root { --accent: #b45309; }
  * { box-sizing: border-box; margin: 0; }
  body { font-family: system-ui, sans-serif; line-height: 1.6; color: #1c2024; background: #fff; }
  .pp { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; width: min(60rem, 92%); margin: 3rem auto; align-items: start; }
  @media (max-width: 44rem) { .pp { grid-template-columns: 1fr; margin-top: 1.5rem; } }
  .pp-media .ph { width: 100%; aspect-ratio: 1; border-radius: 10px; background: #f0f0ee; display: flex; align-items: center; justify-content: center; color: #9aa3ad; font-size: 0.9rem; }
  h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -0.02em; }
  .pp-tag { color: #5b6470; margin-top: 0.5rem; }
  .pp-price { font-size: 1.6rem; font-weight: 700; margin: 1rem 0; color: var(--accent); }
  .pp-features { list-style: none; padding: 0; margin: 1rem 0; }
  .pp-features li { padding: 0.3rem 0 0.3rem 1.5rem; position: relative; color: #444; }
  .pp-features li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
  .pp-cta { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; padding: 0.8rem 2rem; border-radius: 8px; margin: 0.5rem 0 1.5rem; }
  .pp-desc { color: #444; }
  footer { text-align: center; color: #9aa3ad; font-size: 0.85rem; padding: 2rem 0; }
</style>
</head>
<body>
<main class="pp">
  <div class="pp-media">
    <!-- Replace with your own product photo -->
    <img src="https://hform.com/img/hand-poured-soy-candle-amber-jars.jpg" alt="Hand-poured soy candles in amber glass jars" width="1000" height="1000" style="width:100%;height:auto;border-radius:10px;display:block;">
  </div>
  <div class="pp-info">
    <h1>Sea Salt &amp; Sage — hand-poured soy candle</h1>
    <p class="pp-tag">Small-batch, 40-hour burn, poured in our own workshop.</p>
    <div class="pp-price">$24</div>
    <ul class="pp-features">
      <li>100% soy wax, cotton wick</li>
      <li>Burns ~40 hours</li>
      <li>Reusable amber glass jar</li>
      <li>Made to order — ships in 3–5 days</li>
    </ul>
    <a class="pp-cta" href="#">Order now</a>
    <div class="pp-desc"><p>Poured by hand in small batches on the coast, this candle fills a room without overpowering it. The amber jar is made to be kept — rinse it out and it becomes a planter, a pen cup, a home for small things.</p></div>
  </div>
</main>
<footer>© Driftwood Candle Co.</footer>
</body>
</html>

Tips for a handmade product page that sells

Questions

How do I take orders without a webshop?

Point the button at a pre-filled order email or pair the page with an order form. At low volume, confirming each order personally is a feature — buyers of handmade goods like talking to the maker.

What if each piece is unique?

Say so on the page ("no two jars are alike") and treat the photo as representative. For one-of-a-kind pieces, make a page per piece — they’re cheap to generate.

From the same maker

This page, but with real checkout?

A landing page takes orders one email at a time. Tentmaker Stores gives the same product a real store around it — cart, checkout, categories and customer emails, built for small makers and niche sellers.