Category Page
The category page provides a list of all items that belong to the category being viewed, which the customer can click on to see more detailed information. Filter options are also provided, which are a useful navigation tool to narrow your search.
Product filters provide the ability to narrow down your searches, using the following options:
- Product specifics that are set up as part of your product data (e.g. colour, size, etc.).
- Sub-category
- Stock availability
- Price range
- Brand
Filters naturally stack, which means you can use multiple filters at the same time (for example filtering by a category, and also a brand).
The filters that display are directly related to the products on the category page being viewed. For example, if the category being viewed doesn't contain any items associated with the brand "Apple", then that brand won't appear as a filter option.
A full category menu is available for the user to find other products if they wish. When hovering over a top-level category, sub-categories will appear as a fly-out menu. Similarly, when hovering over sub-categories, sub-sub-categories will also be presented.
Some useful utility links are offered to the customer so that they can easily have any pressing questions answered.
The breadcrumb is a quick and easy way to identify where you are in the website's structure, in relation to the home page. For example, if viewing a top level category page, the following will show:
Home / Category One
If viewing a sub-category page, it'll be as below:
Home / Category One / Sub Category One
The page header is a clear way for the user to identify the current page being viewed.
We offer two product thumbnail views - gallery and list view - which can be alternated between using these two buttons. Information on the two layouts is below.
The product thumbnails consist of the necessary information for each product. We have two unique views:
This layout allows 4 products per row, with the most important aspects of each product displayed to the customer - image, title, price, and call-to-action button.
This design offers a much larger thumbnail for each product, and includes a short description for each.
This lets the user know how many products belong to the category being viewed.
A number of sorting options are available for the customer to change the order of the products on the page. These include:
- Most Popular
- Name
- SKU
- Lowest Price
- Highest Price
In order to speed up page load times, we split the products for each category into different pages, which the user can access by using the pagination controls.