Category Page

Category Page

Page Overview

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.

Filter Products

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.

Category Menu

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.

Information Menu

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

Page Header

The page header is a clear way for the user to identify the current page being viewed.

Product Thumbnail View Buttons

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.

Product Thumbnails/Listings

The product thumbnails consist of the necessary information for each product. We have two unique views:

Gallery View

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.

List View

This design offers a much larger thumbnail for each product, and includes a short description for each.

XX Products Found

This lets the user know how many products belong to the category being viewed.

Sorting Options

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.