Mercer — ecommerce storefront template

What this template is for

Mercer is a storefront for a small catalogue — a dozen products, not a thousand. It puts the effort where a small store’s money is: a product page that sells, and a shop page that doesn’t need a search engine to be usable.

What’s inside

Five pages sharing one header, footer and product card through src/partials/, so a price format or a nav link changes in one place.

A product page that carries the variants

Colour and strap are radio inputs styled as chips — keyboard accessible, no JavaScript, and a sold-out option is a disabled radio with a strike-through, not a hidden one. Details, shipping and the guarantee sit in a native <details> accordion. Schema.org Product markup with price, availability and return policy is wired in for rich results.

Platform-neutral, with a fast path

The add-to-cart button already carries Snipcart’s data-item-* attributes: add their script and the store takes orders. For Shopify or Stripe, swap the button for their embed — the rest of the page stays. The cart page is a static order-review layout you keep or drop.

Filters that work without a backend

The shop sidebar links to sections on the page, so every filtered view has a real URL (shop.html#bags) and works with JavaScript off. When you move to a platform, those become collection pages.

What you will need to replace

Every photo is a labelled placeholder in a 4:5 slot. Prices, product names and the nine products in the grid are {{card …}} lines in the page sources — one line per product.