Category Page
The Category Page shows products from one category, such as Rings, Earrings, Necklaces, Bracelets, New Arrivals, Best Sellers, or Sale.
Use this page to help shoppers browse and filter products quickly.
What shoppers see
| Area | What it does |
|---|---|
| Category title | Shows the current category name. |
| Category text | Short text about the category. |
| Product grid | Shows product image, name, price, rating, stock, and badges. |
| Filter button | Opens filters so shoppers can narrow the products. |
| Sort | Lets shoppers sort products by Position, Product Name, or Price. |
| ASC / DESC | Changes the sort direction. |
| Grid columns | Lets shoppers change the desktop grid between 4 columns and 3 columns. |
| Pagination | Lets shoppers move to the next product page. |
| Show per page | Lets shoppers show 12, 24, or 36 products per page. |
Filters
The theme supports layered filters on category pages. In the demo store, shoppers can filter by:
- Category
- Price
- Jewelry Material
- Metal Color
- Stone
- Diamond Shape
- Occasion
- Gender
- Purity
- Ring Size
- Finish
- Certification
Each filter option can show the product count, such as Gold (88).
Tips
If a filter does not show, check the product attribute in Magento Admin. The attribute must be enabled for layered navigation and products must have values for it.
Product card actions
Each product card can show these actions:
| Action | What it does |
|---|---|
| Add to Cart | Adds simple products to cart directly from the listing. |
| View Product | Opens the product page when the product needs options first. |
| Wishlist | Adds the item to the shopper's wishlist. |
| Compare | Adds the item to product compare. |
| Quick View | Opens a quick product preview without leaving the category page. |
Product cards can also show:
- Sale price
- New badge
- Hot badge
- Rating stars
- Review count
- In Stock, Out of Stock, or low stock message
- Second product image on hover, when another image is available
How to check a category page
- Open a category from the menu.
- Check that the category title and text look correct.
- Open Filter and test a few filters.
- Change Sort and ASC / DESC.
- Switch between 4 columns and 3 columns on desktop.
- Open page 2 from pagination.
- Change Show per page.
- Test Wishlist, Compare, Quick View, and Add to Cart.
- Check the same page on mobile.
Good practice
- Keep category names short and clear.
- Add good product images for every product.
- Add values for important jewellery attributes, such as material, stone, size, and occasion.
- Do not add too many filters if shoppers do not need them.
- Keep the first category page fast by using clean product images.