Chapter 2 — Browsing and searching for products
In this chapter: the product listing pages — category, search results, brand and collection — and the filtering and sorting tools they share.
2-1. Category page
- Breadcrumb: Home → parent category → current category; clickable to go back.
- The category title and description + a subcategories shortcut.
- A grid of product cards (section 2-4).
2-2. Filtering, sorting and pagination (shared by all listings)
- Filters (dropdown/side column):
- Subcategory and brand
- Product attributes (for example, colour with colour swatches, size)
- Availability (in-stock items only)
- Customer rating
- Price range (minimum/maximum)
- Featured/selected items
- Active filter chips: each applied filter is shown above the listing and is removed with a single click; there is a "Clear all" too.
- Sorting: only newest and oldest (on the search page, "Most relevant" is also added).
- Number per page and a choice between classic pagination or infinite scroll.
- Result count above the listing.
2-3. Search results page
- Keyword search across the whole catalogue, sorted by relevance.
- The same filters and controls as in section 2-2.
- A "Related results" section: categories, brands and content matching the phrase.
- Phrase suggestions and the ability to "search within" a category/brand.
- A no-results state, with a suggestion to broaden the search.
2-4. Product card
On all listings, each item is a card:
- Image, name, price and star rating
- Colour/attribute samples on the card
- Availability badges ("Available to order", "Limited stock")
- Quick preview: view the details and even add to the basket without leaving the listing
- Clicking the card → the full product page (Chapter 3)
2-5. Brand page and collection page
- Brand: all products of a brand with the same filters/sorting.
- Collection: a curated group created by the manager (for example, "Summer picks"); if it has not been filled yet, a "Coming soon" state is displayed.