hform/pages

Jewelry product page template

A product page for jewelry, shown with a hammered silver ring. Jewelry pages live or die on two things: material honesty (what exactly is it made of?) and sizing confidence. Both get top billing here.

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>Hammered band — sterling silver ring — $89</title>
<meta name="description" content="Forged, hammered and finished by hand. 925 silver.">
<meta property="og:type" content="product">
<meta property="og:title" content="Hammered band — sterling silver ring">
<meta property="og:description" content="Forged, hammered and finished by hand. 925 silver.">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Hammered band — sterling silver ring",
  "description": "Each band starts as straight wire and is forged into shape, so the hammer marks catch light differently on every ring. Wear it daily — the finish only gets better with time. Polishing cloth included.",
  "offers": {
    "@type": "Offer",
    "price": "89",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  },
  "image": "https://hform.com/img/sterling-silver-rings-on-hand.jpg"
}
</script>
<style>
  :root { --accent: #475569; }
  * { 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/sterling-silver-rings-on-hand.jpg" alt="Sterling silver rings worn on a hand" width="1000" height="1000" style="width:100%;height:auto;border-radius:10px;display:block;">
  </div>
  <div class="pp-info">
    <h1>Hammered band — sterling silver ring</h1>
    <p class="pp-tag">Forged, hammered and finished by hand. 925 silver.</p>
    <div class="pp-price">$89</div>
    <ul class="pp-features">
      <li>925 sterling silver</li>
      <li>Sizes US 5–12, half sizes included</li>
      <li>Free resizing within 60 days</li>
      <li>Ships in a recycled-cotton pouch</li>
    </ul>
    <a class="pp-cta" href="#">Order your size</a>
    <div class="pp-desc"><p>Each band starts as straight wire and is forged into shape, so the hammer marks catch light differently on every ring. Wear it daily — the finish only gets better with time. Polishing cloth included.</p></div>
  </div>
</main>
<footer>© Aster &amp; Ore</footer>
</body>
</html>

Tips for a jewelry product page that sells

Questions

How do I handle ring sizes on a static page?

List the sizes you make in the features and ask for the size in the order email or form. If you offer resizing, say so — it removes the fear of ordering wrong.

Should I show the price for fine jewelry?

Yes. "Price on request" loses more buyers than it impresses. If pieces vary by size or stone, show the starting price.

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