Search results custom sort order

The default sort order for products is based on the setting "Default sort order for product listings" which can be edited here Webstore > Webstore Settings.

To have a different sort order for the search results page, you will need to modify the search results template to do this.

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

• Read through the Getting Started to get a better sense of how the Control Panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Coding Instructions

Step 1: Open the search results template

The search results template can be found here httpdocs/assets/themes/[THEME-NAME]/templates/cms/search_results.template.html.

Step 2: Add the code into the template

Just above the [%thumb_list type:'products' limit:'[@config:THUMB_LIMIT@]'%] add the following code:

[%set [@my_sort_order@]%][%if [@form:sortby@] eq ''%]popular[%else%][@form:sortby@][%/if%][%/set%]

The above code is sorting by 'popular', but there are many options to select from. See the sortby attribute in the thumb_list function.

Step 3: Add the sortby parameter

Add sortby:'[@my_sort_order@]' to the thumb_list. The line should look like this:

[%thumb_list type:'products' limit:'[@config:THUMB_LIMIT@]' sortby:'[@my_sort_order@]'%]

Step 4: Update the sort selector

Update the sort selector dropdown highlighted here, with the following code:

<select name="sortby" onChange="return this.form.submit();" class="form-control" aria-label="Sort products by">
    <option value="popular" [%if [@my_sort_order@] eq 'popular'%]selected[%/if%]>Most Popular</option>
    <option value="name" [%if [@my_sort_order@] eq 'name'%]selected[%/if%]>Name</option>
    <option value="SKU" [%if [@my_sort_order@] eq 'SKU'%]selected[%/if%]>SKU</option>
    <option value="lowest_price" [%if [@my_sort_order@] eq 'lowest_price'%]selected[%/if%]>Lowest Price</option>
    <option value="highest_price" [%if [@my_sort_order@] eq 'highest_price'%]selected[%/if%]>Highest Price</option>
</select>