Pro
Shop template
A complete shop on one set of products: a home page with a hero and new arrivals, a shop page with filters and quick add, a full product page, a cart drawer, checkout and an order page that tracks delivery. The product page is the centrepiece: a gallery that follows the chosen colour, sizes that say what is missing, folded details, reviews with a fit summary, things that pair well, and a buy bar that rises when the buy box scrolls away.
pnpm dlx shadcn@latest add @caliper/shop-templateFree delivery over $75 · Use FIELD10 for 10% off your first order
Made for the long season
Linen, wool and leather that wear in, not out. New pieces for autumn are here.
New this season
Free delivery over $75
Standard delivery in 3–5 working days.
30-day returns
Free to return, by post or in store.
Repairs for life
Send it back worn; we'll mend it.
When to use
Use it for
- A store for a small brand: clothing, homeware, goods made in small runs.
- A starting point for a headless shop on your own commerce back end.
Skip it when
- Catalogues of thousands of products; add search, pagination and a server-side listing.
- Digital subscriptions; use `PricingTemplate` and `CheckoutScreen`.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- The photo goes to the bag
- Adding sends the product photo arcing into the bag in the header, and the count changes when it lands, so the cart is found without a modal.
- Quick add only when it can be
- Items with sizes open their page from Quick add instead of guessing a size.
- A buy bar that follows
- Once the buy box scrolls away a slim bar rises with the name and price; it takes you back to the options instead of adding blind.
Usage
- Screens like pages
- Each screen starts at its heading, which takes focus, so screen readers and keyboards behave as after a page load.
- One data value
- Products, colours with their pictures, sizes, details and reviews are plain data you pass in; the cart, promo and order live in the template.
Installation
pnpm dlx shadcn@latest add @caliper/shop-template
Adds its 19 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { ShopTemplate } from "@/components/ui/shop-template"
The worked example comes with Pro
The 123-line example behind the preview opens here, ready to copy.
- 602 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
ShopTemplate
component
Accessibility
It exposes img, radiogroup and radio semantics, with aria-hidden, aria-label, aria-current and aria-labelledby kept in step with state.
Keyboard and focus handling comes from Radix dialog and popover: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.
Motion
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.
Related
- Product detailA product page with gallery, options, price and an add-to-cart action.
- Product galleryA main image with thumbnails for a product.
- Cart drawerA side drawer listing cart lines with quantities and a subtotal.
- CheckoutA single-page checkout with contact, delivery, payment and an order summary.
- Order trackerWhere an order is: finished stages ticked, the line filling to the current one with the van moving along it, and the next stage's time.
- Cart flightA product row whose Add buttons send a copy of the product photo arcing into the cart button, which takes it with a bump while the count rolls up. The flight shows cause and effect at a distance.