Templates / Product Page

Product Page beta Pro

A storefront product page: gallery, options, quantity, purchase actions and the accordions that answer the last questions.

Preview

shop.acme.studio/trail-pack-20

Shop / Packs / Trail Pack 20L

TRAIL PACK 20L
Charcoal — main view

New

Trail Pack 20L

4.8 · 212 reviews

$148~~$185~~Save 20%

In stock — ships within 24 hours from Tokyo.

Color — Charcoal

Size

S — 14L M — 20L L — 28L

Free shipping over $100 · 30-day returns · 2-year warranty
Pickup available at the Nagoya studio, weekdays.

Details

Padded 15-inch laptop sleeve, two bottle pockets, a weatherproof roll top and a repair kit in the lid. 840 g in size M.

Materials

Recycled 900D nylon shell, YKK zips, aluminum hardware. PFAS-free coating.

Shipping & returns

Orders placed before 15:00 ship the same day. Returns are free within 30 days, used or not — tell us what failed and we fix the next run.

Ships in 24 hoursFrom the Tokyo studio, tracked, with the delivery estimate stated before you pay.

2-year warrantyZips, seams and buckles. If it breaks on a trail, the repair is on us.

30-day returnsWalk it around the block for a month. Not right is a full refund.

Built from: Parts: Badge, Button, Accordion, Segmented control — include their CSS alongside this template.

<div class="k-tpl-pd">
  <p class="k-tpl-pd-crumbs">Shop / Packs / Trail Pack 20L</p>
  <div class="k-tpl-pd-grid">
    <div>
      <div class="k-tpl-pd-main"><b>TRAIL PACK 20L<br><span style="font-size:12.5px;font-weight:500;color:var(--k-zinc-400)">Charcoal — main view</span></b></div>
      <div class="k-tpl-pd-thumbs"><span class="on" style="background:linear-gradient(160deg, var(--k-zinc-700), var(--k-zinc-950))"></span><span class="" style="background:linear-gradient(160deg, var(--k-accent), var(--k-zinc-950))"></span><span class="" style="background:linear-gradient(160deg, var(--k-zinc-400), var(--k-zinc-800))"></span><span class="" style="background:linear-gradient(160deg, var(--k-zinc-900), var(--k-zinc-950))"></span></div>
    </div>
    <div class="k-tpl-pd-info">
      <span class="badge teal">New</span>
      <h2>Trail Pack 20L</h2>
      <div class="k-tpl-pd-stars"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><span><b style="color:var(--k-ink)">4.8</b> · 212 reviews</span></div>
      <div class="k-tpl-pd-price"><b>$148</b><s>$185</s><span class="save">Save 20%</span></div>
      <p class="k-tpl-pd-note">In stock — ships within 24 hours from Tokyo.</p>
      <p class="k-tpl-pd-lbl">Color — Charcoal</p>
      <div class="k-tpl-pd-sw">
        <label><input type="radio" name="pd-color" checked><i style="background:var(--k-zinc-800)"></i></label>
        <label><input type="radio" name="pd-color"><i style="background:var(--k-accent)"></i></label>
        <label><input type="radio" name="pd-color"><i style="background:var(--k-zinc-300)"></i></label>
      </div>
      <p class="k-tpl-pd-lbl">Size</p>
      <div class="k-seg" role="radiogroup" aria-label="Size">
        <label class="k-seg-item"><input type="radio" name="pd-size"><span>S — 14L</span></label>
        <label class="k-seg-item"><input type="radio" name="pd-size" checked><span>M — 20L</span></label>
        <label class="k-seg-item"><input type="radio" name="pd-size"><span>L — 28L</span></label>
      </div>
      <div class="k-tpl-pd-buy">
        <span class="k-tpl-pd-qty"><button type="button" aria-label="Decrease quantity">−</button><b>1</b><button type="button" aria-label="Increase quantity">+</button></span>
        <button class="btn btn-pri btn-lg" type="button" style="flex:1">Add to cart — $148</button>
      </div>
      <p class="k-tpl-pd-ship">Free shipping over $100 · 30-day returns · 2-year warranty<br>Pickup available at the Nagoya studio, weekdays.</p>
      <div class="k-tpl-pd-acc">
        <details class="k-acc" open><summary>Details<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary><div class="k-acc-body">Padded 15-inch laptop sleeve, two bottle pockets, a weatherproof roll top and a repair kit in the lid. 840 g in size M.</div></details>
        <details class="k-acc"><summary>Materials<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary><div class="k-acc-body">Recycled 900D nylon shell, YKK zips, aluminum hardware. PFAS-free coating.</div></details>
        <details class="k-acc"><summary>Shipping &amp; returns<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary><div class="k-acc-body">Orders placed before 15:00 ship the same day. Returns are free within 30 days, used or not — tell us what failed and we fix the next run.</div></details>
      </div>
    </div>
  </div>
  <div class="k-tpl-pd-feats">
    <div><b>Ships in 24 hours</b>From the Tokyo studio, tracked, with the delivery estimate stated before you pay.</div>
    <div><b>2-year warranty</b>Zips, seams and buckles. If it breaks on a trail, the repair is on us.</div>
    <div><b>30-day returns</b>Walk it around the block for a month. Not right is a full refund.</div>
  </div>
</div>

/* KATA Template: Product Page */
.k-tpl-pd{background:var(--k-bg);border:1px solid var(--k-line);border-radius:16px;padding:26px;font-family:var(--k-font);color:var(--k-ink)}
.k-tpl-pd-crumbs{font-size:12.5px;color:var(--k-ink-3);margin-bottom:18px}
.k-tpl-pd-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:start}
.k-tpl-pd-main{border-radius:14px;background:linear-gradient(160deg, var(--k-zinc-700), var(--k-zinc-950));min-height:300px;display:flex;align-items:center;justify-content:center;color:var(--k-on-color)}
.k-tpl-pd-main b{font-size:21px;font-weight:650;letter-spacing:.02em;text-align:center;padding:20px}
.k-tpl-pd-thumbs{display:flex;gap:9px;margin-top:9px}
.k-tpl-pd-thumbs span{flex:1;height:56px;border-radius:10px;border:1px solid var(--k-line)}
.k-tpl-pd-thumbs .on{outline:2px solid var(--k-accent);outline-offset:1px}
.k-tpl-pd-info h2{font-size:23px;font-weight:650;letter-spacing:-.022em;margin:9px 0 7px}
.k-tpl-pd-stars{display:flex;align-items:center;gap:7px;color:var(--k-amber-ink);font-size:12.5px}
.k-tpl-pd-stars span{color:var(--k-ink-2)}
.k-tpl-pd-price{display:flex;align-items:baseline;gap:10px;margin:15px 0 4px}
.k-tpl-pd-price b{font-size:24px;font-weight:700}
.k-tpl-pd-price s{color:var(--k-ink-3);font-size:15px}
.k-tpl-pd-price .save{color:var(--k-success-ink);font-size:12.5px;font-weight:650}
.k-tpl-pd-note{font-size:12.5px;color:var(--k-ink-2);margin-bottom:16px}
.k-tpl-pd-lbl{font-size:12px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--k-ink-3);margin:15px 0 8px}
.k-tpl-pd-sw{display:flex;gap:9px}
.k-tpl-pd-sw label{cursor:pointer}
.k-tpl-pd-sw input{position:absolute;opacity:0}
.k-tpl-pd-sw i{display:block;width:26px;height:26px;border-radius:50%;border:2px solid var(--k-bg);box-shadow:0 0 0 1px var(--k-line)}
.k-tpl-pd-sw input:checked + i{box-shadow:0 0 0 2px var(--k-accent)}
.k-tpl-pd-sw input:focus-visible + i{box-shadow:0 0 0 2px var(--k-ink)}
.k-tpl-pd-buy{display:flex;gap:10px;margin-top:20px}
.k-tpl-pd-qty{display:inline-flex;align-items:center;border:1px solid var(--k-line);border-radius:9px;overflow:hidden}
.k-tpl-pd-qty button{width:36px;height:100%;min-height:40px;border:0;background:var(--k-bg);font-size:16px;cursor:pointer;color:var(--k-ink)}
.k-tpl-pd-qty b{min-width:34px;text-align:center;font-size:14px}
.k-tpl-pd-ship{font-size:12.5px;color:var(--k-ink-2);line-height:1.8;margin-top:14px}
.k-tpl-pd-acc{margin-top:20px}
.k-tpl-pd-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:24px}
.k-tpl-pd-feats div{border:1px solid var(--k-line);border-radius:12px;padding:14px;font-size:12.5px;line-height:1.65;color:var(--k-ink-2)}
.k-tpl-pd-feats b{display:block;color:var(--k-ink);font-size:13px;margin-bottom:3px}
@media (max-width:820px){.k-tpl-pd-grid{grid-template-columns:1fr}.k-tpl-pd-feats{grid-template-columns:1fr}}

Installation

CLI

node kata-ui.mjs add product-page

Writes the template’s CSS into your project. Everything it is built from comes with it. New to the CLI? See the CLI doc.

Manual

Load tokens.css once, before any part.
Copy the CSS tab into your stylesheet, with the CSS of everything listed under “Built from” above.
Copy the HTML where it belongs.

Usage

The gallery panels are gradient stand-ins — drop photographs into the same frames. Options are real form controls (swatches are radios, sizes the Segmented part), the quantity stepper is three buttons and a number, and the accordions are native details: the page needs no script until the cart does. Price, stock and shipping claims sit above the fold because that is where buying decisions happen.

Landing Page

Settings