Search Results Page

Search Results Page

Page Overview

The search results page displays the products and content that match the keywords that you've used in the search field. Its layout is very similar to the category page (with the inclusion of filters and different page controls such as gallery/list view), but a different template is used so that you may customise them separately if required.

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.

Breadcrumb

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 the search example, the breadcrumb will show the keywords of the search that has been performed, for example:

Home / Search for 'sample'

Page Header

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

Search Bar

The search bar is auto-populated with the keywords that have been entered to perform the search, and can easily be overwritten in order to execute a new search request.

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

Pagination

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.

Related articles: