ShelfA catalogue shelf: opener, a four-across row of product tiles on a shelf line, a dashed next-batch slot, occasion tabs, and with the live data source a filter bar with counts.
Source code available to entitled users.
Category Strip
category-strip
Add-onTome
A scrolling strip or grid of product categories, each with a label and an optional icon. With a Tome catalog connected, the labels stay in step with your categories.
MinimalText links only — no icons, no tile backgrounds.
GridFixed-column grid of category cards with image thumbnails.
ContentsNumbered rows ruled like a printed contents page: the number, the title, one line and a live piece count on one shared baseline.
Source code available to entitled users.
Price Table
price-table
Add-onTome
A pricing table that compares plans side by side, with feature rows and a button for each plan.
DarkDark background with accent highlight on the recommended tier.
Source code available to entitled users.
Inventory Badge
inventory-badge
Add-onTome
A small stock badge for beside a product, such as "In stock" or "Only 3 left". You set the status yourself.
In Stock
In Stock
MinimalText-only status without colored pill background.
Only 3 left
With CountShows exact remaining quantity, e.g. "Only 3 left".
Source code available to entitled users.
Featured Product
featured-product
Add-onTome
A full-width spotlight for one product, with its description, features and a call to action. With a Tome catalog connected, the title and description come from the product itself.
Best Seller
Featured
Alder Trail Pack 28L
Lightweight 28-litre pack tuned for all-day carry. The same design our field testers wore on every route this season.
$49.99$79.99
Ventilated back panel keeps your shoulders cool on long climbs
Removable rain cover and hydration sleeve included
Recycled ripstop fabric with a lifetime repair promise
AnnotatedAn in-use plate with margin notes standing beside it, under a numbered opener; the notes become a two-column list on phones.
Source code available to entitled users.
Product Gallery
product-gallery
Add-onTome
The gallery for one product: a lead image, a row of thumbnails and a soft cross-fade, swiping with dots on phones. With a Tome catalog connected, the frames come from the product itself.