Browsing & Filtering Products
Page Overview
The Products page is Hatecholo's main catalog view, showing every product available across all shops. This article also covers the Product Categories pages, which let you drill down into a category and its subcategories before landing on a filtered product list.
Interface Overview
- Products page — a filter sidebar (or drawer on mobile) plus a grid of product cards, with a Sort by control and pagination.
- Product Categories page — first shows a grid of top-level categories; clicking one shows that category's subcategories; clicking a subcategory takes you to the Products page pre-filtered to it.
UI Components
Products page
- Filter button (mobile only) — opens the Filters List drawer.
- Sort by dropdown — options are: Name A-Z, Name Z-A, Price Low to High, Price High to Low, Inventory Quantity Low to High, Inventory Quantity High to Low, Average Rating Low to High, Average Rating High to Low, Popularity Low to High, Popularity High to Low.
- Active filter chips — when a filter is applied, a small chip row shows the selected Category, Brand, or Tag values, each with a remove (reset) icon.
- Reset button — appears once any filter is active; clears every filter and returns to the full catalog.
- Category filter — checkbox list of subcategories, shown in a scrollable panel.
- popular Brands filter — checkbox list of brand names.
- Popular Tag filter — clickable tag buttons; selected tags are highlighted.
- Product grid — product cards showing image, name, and price.
- Pagination — page controls under the grid.
Note: A price range slider/input is not currently available on the Products page — pricing filters are limited to sorting by price.
Product Categories page
- Category tiles — a grid of top-level categories with images; clicking one shows "
Category Name- Subcategories". - Subcategory tiles — clicking a subcategory navigates to the Products page filtered to that subcategory.
- Breadcrumb — shows Home > Categories > (selected category name) when viewing subcategories.
- Pagination — shown under both the category grid and the subcategory grid when there are multiple pages.
Step-by-Step User Guide
To browse and filter the full product catalog:
- Open the Products page from the main navigation.
- On desktop, use the Category, popular Brands, and Popular Tag panels on the left. On mobile, tap the Filter button to open the drawer.
- Check one or more filters — the product grid updates automatically.
- Use Sort by to reorder results (for example, Price Low to High).
- Remove an individual filter by clicking its chip, or click Reset to clear everything.
- Use pagination at the bottom to move between pages of results.
To browse by category hierarchy:
- Open the Categories page from the main navigation.
- Click a top-level category tile to see its subcategories.
- Click a subcategory tile to open the Products page, already filtered to that subcategory.
- Use the breadcrumb ("Home > Categories > ...") to go back to the full category list.
Forms / Tables / Statuses
Filters are checkboxes and buttons rather than a submitted form — selections apply immediately. If no products match your filters, the page shows "No Product Found".
User Tips
Tip: Combine multiple filter types at once — for example, a Category plus a Tag — to narrow results quickly.
Tip: The Category tiles on the Categories page always show subcategories once you've clicked into a top-level category; use the "Categories" breadcrumb link to start over.
Best Practices
- Start broad with a Category filter, then narrow further with Brand or Tag filters.
- Use Sort by "Popularity High to Low" or "Average Rating High to Low" to find well-reviewed items quickly.
- Clear filters with Reset before starting a new, unrelated search.
Common Mistakes
- Expecting a price range slider on the Products page — it isn't available; use price sorting instead.
- Forgetting that filters persist as you sort or paginate, which can make it look like "products are missing" when a filter is still active. Check for active filter chips and use Reset if needed.
Troubleshooting
- The product grid is empty: Check the active filter chips near the top of the page and click Reset to clear them.
- Sort selection doesn't seem to apply: Make sure you selected an option from the Sort by dropdown (not just opened it) — the page reloads results automatically after a selection.
Frequently Asked Questions
Q: Can I filter products by price range? A: Not directly with a slider. You can sort by "Price Low to High" or "Price High to Low" instead.
Q: What's the difference between the Products page and the Categories page? A: The Categories page helps you drill down from broad categories to subcategories. Selecting a subcategory takes you to the Products page with that subcategory already applied as a filter.