hform/pages

T-shirt product page template

A product page for a t-shirt or small apparel line. Apparel buyers decide on fabric, fit and sizing — the features list carries that load, while the description sells the design itself.

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>“Cast Iron Club” — organic cotton tee — $29</title>
<meta name="description" content="Heavyweight organic cotton, printed by hand in small runs.">
<meta property="og:type" content="product">
<meta property="og:title" content="“Cast Iron Club” — organic cotton tee">
<meta property="og:description" content="Heavyweight organic cotton, printed by hand in small runs.">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "“Cast Iron Club” — organic cotton tee",
  "description": "A shirt for people who season their pans and have opinions about it. Screen-printed by hand, so each run is slightly different — the ink sits in the fabric, not on top of it, and survives the dryer you shouldn’t be using anyway.",
  "offers": {
    "@type": "Offer",
    "price": "29",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  },
  "image": "https://hform.com/img/black-cotton-t-shirt-worn.jpg"
}
</script>
<style>
  :root { --accent: #111827; }
  * { 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/black-cotton-t-shirt-worn.jpg" alt="Black cotton t-shirt worn, showing the fit" width="1000" height="1000" style="width:100%;height:auto;border-radius:10px;display:block;">
  </div>
  <div class="pp-info">
    <h1>“Cast Iron Club” — organic cotton tee</h1>
    <p class="pp-tag">Heavyweight organic cotton, printed by hand in small runs.</p>
    <div class="pp-price">$29</div>
    <ul class="pp-features">
      <li>180 gsm organic combed cotton</li>
      <li>Unisex fit, sizes XS–3XL</li>
      <li>Water-based screen print</li>
      <li>Free size exchange</li>
    </ul>
    <a class="pp-cta" href="#">Order — pick your size</a>
    <div class="pp-desc"><p>A shirt for people who season their pans and have opinions about it. Screen-printed by hand, so each run is slightly different — the ink sits in the fabric, not on top of it, and survives the dryer you shouldn’t be using anyway.</p></div>
  </div>
</main>
<footer>© Ferrous Apparel</footer>
</body>
</html>

Tips for a t-shirt product page that sells

Questions

How do I handle sizes without a cart?

List available sizes in the features and collect the size in the order email or form. Print-on-demand instead? Point the button at your POD storefront and use this page as the brand front door.

What about size charts?

Link one next to the buy button. A measurements table (chest width, length per size) prevents most returns — and is exactly what hform/tables will 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.

More page templates