Shop / Catalog
Storefront blocks and patterns
Shop registers these blocks in the page builder. Every field has a label and help text, and fields that do not apply to the current choice are hidden.
| Block | What it shows |
|---|---|
Product gallery (justflows.shop.gallery) | Product photos in several layouts, with an optional lightbox. |
Buy box (justflows.shop.buy-box) | Title, price, variation options, stock, and Add to cart. |
Product breadcrumbs (justflows.shop.breadcrumbs) | Shop › category › subcategory from the product's first category, each linking to the filtered shop. Or type links by hand. |
Product highlights (justflows.shop.highlights) | Short selling points. |
Product details accordion (justflows.shop.accordion) | Collapsible detail sections. |
Store policies (justflows.shop.policies) | Delivery, returns, and similar notes. |
Product reviews (justflows.shop.reviews) | Reviews with ratings. Reviews without an avatar use the site's avatar placeholder. |
Related products (justflows.shop.related) | Products from the catalog (see below). |
Product list (justflows.shop.product-list) | A product grid in one of many styles: inline price, CTA, swatches, tall images, overlay, simple, favorites, border grid, supporting text, hover CTA, and detail cards. |
Detail shots (justflows.shop.detail-shots) | Close-up images with captions. |
Product list and Related products take their products from: all products, products related to a product (most shared categories and tags first, then newest), products you pick (a searchable checklist, in the order you tick them), chosen categories (subcategories included), or chosen tags. Sort by newest, oldest, name, or price, and show up to 24. A product page never lists itself. Type rows by hand keeps manual rows.
Gallery, Buy box, Breadcrumbs, and Details accordion have a Product picker. Left empty, they follow the product page they are on. With a product picked, they show that product on any page, and Add to cart adds it.
Patterns: Product detail, Product mosaic, Product story, Product list, and Ecommerce storefront. Storefront styles (.jf-product-*) are added to /theme.css only while Shop is active. Products without a photo show the site's Product image placeholder, which you can replace under Settings → Placeholders.