How to Add Product Sorting to Search Results

Product findability is a key facfor of success in any eCommerce store. If your store's inventory contains more than a few products or several categories, then a product search feature is critical for improving the usability, experience, and overall conversions of your site.

While simple search is a good starting point, customizing your search functionalities with product sorting can significantly improve your eCommerce store experience.

Steps to Adding Product Sorting to Your Ecommerce Store

Implementing the product sorting functionality with LemonStand is possible with 3 steps.

1. Adding a search form to your website
2. Creating the search page with LemonStand's built-in search functionality
3. Adding controls for result sorting 

Step 1 - Adding a Search Form to your Website

The basic search feature is a simple form with a string input field. We recommend creating the form as a partial in LemonStand to make it easier to display the search form on all pages of your store.

Below is an example of the code used in our Demo store.

<form method="get" action="/search">
    <input name="query" type="text" value="<?= isset($query) ? $query : null ?>"/>
    <input type="submit" value="Find Products"/>
    <input type="hidden" name="records" value="6"/>
</form>

<form method="get" action="/search">
    <input name="query" type="text" value="{{ query|unescape }}"/>
    <input type="submit" value="Find Products"/>
    <input type="hidden" name="records" value="6"/>
</form>

Step 2 - Creating the Search Page

LemonStand's built-in shop:search function allows you to easily create a product search page. After submitting the form from the previous step, the action creates a $products PHP variable with contains a list of products that match the search parameters. 

Already built-in are several different parameters that can be searched for:

• query string
• product categories
• product manufacturers
• product groups
• product options
• product attributes
• price range.

Step 3 - Adding Product Sorting

By default, LemonStand's search results are sorted by relevance to the query string. To add product sorting to the search results page, you can specifiy another sorting option by hiding irrelevant results or adding a drop-down menu for visitors to indicate their preferences. 

Here is an example of the code that can be used:

<select name="sorting">
  <?
    $sorting_options = array(
      'relevance'=>'Relevance',
      'name'=>'Name',
      'name desc'=>'Name desc',
      'price'=>'Price',
      'price desc'=>'Price desc',
      'created_at'=>'Oldest first',
      'created_at desc'=>'Newest first',
      'product_rating'=>'Rating approved',
      'product_rating desc'=>'Rating approved desc',
      'product_rating_all'=>'Rating all',
      'product_rating_all desc'=>'Rating all desc'
    );
    
    $current_sorting = isset($sorting) ? $sorting : null;
    foreach ($sorting_options as $sorting_col=>$sorting_name):
  ?>
    <option <?= option_state($current_sorting, $sorting_col) ?> 
      value="<?= $sorting_col ?>"><?= h($sorting_name) ?></option>
  <? endforeach ?>
</select>

<select name="sorting">
  {% set sorting_options = {
      'relevance': 'Relevance',
      'name': 'Name',
      'name desc': 'Name desc',
      'price': 'Price',
      'price desc': 'Price desc',
      'created_at': 'Oldest first',
      'created_at desc': 'Newest first',
      'product_rating': 'Rating approved',
      'product_rating desc': 'Rating approved desc',
      'product_rating_all': 'Rating all',
      'product_rating_all desc': 'Rating all desc' } %}
  {% set current_sorting = sorting %}
  {% for sorting_col, sorting_name in sorting_options %}
    <option {{ option_state(current_sorting, sorting_col) }} 
      value="{{ sorting_col }}">{{ sorting_name }}</option>
  {% endfor %}
</select>

Next: How to Associate Country and State Codenames
Previous: Articles
Return to Articles