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.
Product filters provide the ability to narrow down your searches, using the following options:
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 the search example, the breadcrumb will show the keywords of the search that has been performed, for example:
Home / Search for 'sample'
The page header is a clear way for the user to identify the current page being viewed.
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.
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:
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.