Help Center / Storefront experience · Concept
Category pages and product cards
How customers browse categories, filter and sort products, and what each product card shows.
Where to find itCatalogueCategories
Help CenterHelp CenterHelp Center / Storefront experience · Concept
How customers browse categories, filter and sort products, and what each product card shows.
On the website your categories are called collections. Customers reach them from the menu, from home page sections and from the "all collections" page.
The page at /collections lists every category as a tile. An empty shop shows "No collections yet."
With category availability switched on, a category is listed only during its own hours. Outside them it disappears from the list. See Category availability (Shop Time).
A category page shows its products as a grid of cards, with its sub-categories above them where the theme shows them.
| Customers can | Options |
|---|---|
| Sort | Featured, Best selling, Newest, Price: low to high, Price: high to low, Alphabetical: A–Z |
| Filter | Availability ("In stock only"), price range, brand, tag |
| Clear filters | Chips for each active filter and "Clear all" |
| See more | Page numbers or a load-more button, depending on the theme |
Filters are built from your product data. A brand or tag filter has entries only when products carry brands or tags.
An empty category reads "This collection is empty right now. Check back soon." Filters that match nothing read "No products found".
To change this: categories under Catalogue › Categories, see Categories; the layout in the editor's collection template. See Pages and templates.
The same card is used on category pages, home sections and search results.
| On the card | Shown when |
|---|---|
| Price, crossed-out price and saving | The product has a discounted price. See Product prices, discounted prices and cost |
| "From" price | The product's variants have different prices |
| "Add to cart" | A simple product that is in stock |
| "Select options" or "Choose options" | The product has variants or a required add-on. The card opens the product page instead of adding to the cart |
| Sold-out badge | The product cannot be ordered |
| New badge | The product counts as a new arrival and Enable New Arrival Section is on in General Settings |
| Offer badge and countdown | A discount rule applies to the product. See Offers and discount codes |
| Rating stars | Reviews are on and the theme's Show product rating is on (Show rating in Pronto and Halo) |
| Pack size, such as "500 g" | The product has a unit label or a pack size, and Show Unit Label With Name is on in Picker Settings |
| Wishlist heart | The theme's Show wishlist heart on product cards is on (Show wishlist heart on cards in Pronto and Halo) |
To change this: the card style and what it shows are theme settings. See Theme settings: product cards and cart.
With Disable Out Of Stock Products? on, sold-out products are left out of listings altogether. With it off they stay visible with a sold-out badge. The switch is in Shop › Settings › General Settings. See General Settings: stock and catalogue.