hform/pages

Skincare product page template

A product page for soap and simple skincare, shown with a cold-process bar. Skincare buyers read ingredients before anything else — this layout puts the full list where a features list normally goes.

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>Oat &amp; Honey — cold-process soap bar — $9</title>
<meta name="description" content="Five ingredients, cured six weeks, gentle enough for every day.">
<meta property="og:type" content="product">
<meta property="og:title" content="Oat &amp; Honey — cold-process soap bar">
<meta property="og:description" content="Five ingredients, cured six weeks, gentle enough for every day.">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Oat & Honey — cold-process soap bar",
  "description": "Made the slow way: cold-processed and cured for six weeks so the bar lasts longer and treats skin kindly. The oats are ground in-house; the honey comes from hives four kilometres from the workshop.",
  "offers": {
    "@type": "Offer",
    "price": "9",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  },
  "image": "https://hform.com/img/handmade-cold-process-soap-bars.jpg"
}
</script>
<style>
  :root { --accent: #a16207; }
  * { 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/handmade-cold-process-soap-bars.jpg" alt="Handmade cold-process soap bars tied with twine" width="1000" height="1000" style="width:100%;height:auto;border-radius:10px;display:block;">
  </div>
  <div class="pp-info">
    <h1>Oat &amp; Honey — cold-process soap bar</h1>
    <p class="pp-tag">Five ingredients, cured six weeks, gentle enough for every day.</p>
    <div class="pp-price">$9</div>
    <ul class="pp-features">
      <li>Olive oil, coconut oil, oats, raw honey, lye — that’s all</li>
      <li>Unscented, no essential oils</li>
      <li>Palm-oil free, plastic-free wrap</li>
      <li>~110 g bar, cured 6 weeks</li>
    </ul>
    <a class="pp-cta" href="#">Order a bar</a>
    <div class="pp-desc"><p>Made the slow way: cold-processed and cured for six weeks so the bar lasts longer and treats skin kindly. The oats are ground in-house; the honey comes from hives four kilometres from the workshop.</p></div>
  </div>
</main>
<footer>© Meadowlark Soapworks</footer>
</body>
</html>

Tips for a skincare product page that sells

Questions

Can I make claims about skin conditions?

Be careful: claiming a cosmetic treats a condition can reclassify it as a drug in many jurisdictions. Describe ingredients and sensory experience; let reviews say the rest.

How do I sell a product people want to smell first?

Describe scent by reference ("black tea, cut grass") and offer a sample size — a low-risk first order converts better than any description.

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.

More page templates