I ran into a design where the price sorting and color sorting were under same sorting dropdown. To meet this need i performed below solution where i have merged filter by and sort by in product toolbar.

Leaving the default sorting and filter as it is i decided to create a fake dropdown which would include both under one dropdown. The active sorting/filters applied are shown above the dropdown.

Below is the block of code that would generate fake sorting for both sortby and filter by.
Only two of the sorting options are being pulled. You can pull as much as you like and cross and blank images are being added for active status on sorting dropdown and font awesome cross icon is being used. Also take care for the translation that are being used. Please look for the tags that are selectively being considered for color.
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
<div class="sorting-outer-wrap">
  <div class="fake-sorting">
    <div class="active-sorting"></div>
    <div class="fake-filter-title">
      <label class="filters-toolbar__label" for="SortBy">{{ 'collections.sorting.title' | t }}</label>
    </div>
    <ul class="fake-sort-listing" style="display:none;">
      <li data-value="price-ascending"{% if sort_by == "price-ascending" %} class="active"{% endif %}>
        {% if sort_by == "price-ascending" %}
          {{ 'cross.jpg' | asset_url | img_tag }}
        {% else %}
          {{ 'blank.jpg' | asset_url | img_tag }}
        {% endif %}
        {{ 'collections.sorting.price_ascending' | t }}
      </li>
      <li data-value="price-descending"{% if sort_by == "price-descending" %} class="active"{% endif %}>
        {% if sort_by == "price-descending" %}
          {{ 'cross.jpg' | asset_url | img_tag }}
        {% else %}
          {{ 'blank.jpg' | asset_url | img_tag }}
        {% endif %}
        {{ 'collections.sorting.price_descending' | t }}
      </li>
      {% for tag in collection.all_tags %}
          <li data-value="/collections/{% if collection.handle != blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}"{% if current_tags contains tag %} class="active"{% endif %}>
            {% assign sign = 'blank.jpg' %}
            {% if current_tags contains tag %}
              {% assign sign = 'cross.jpg' %}
            {% endif %}
            {% if tag == 'white' or tag == 'cream' %}
              {{ sign | asset_url | img_tag }} Colour: {{ tag }}
            {% else %}
              {{ sign | asset_url | img_tag }} {{tag}}
            {% endif %}
          </li>
      {% endfor %}
    </ul>
  </div>
</div>

And the functioning of the dropdown, active status are being handled by jquery code block below.

jQuery(document).ready(function(){
  
  function sortingaction(selval,_this){
    if($('#SortBy option[value="'+selval+'"]').length){
      if(_this.hasClass('active')){
        //select default selector
        $('#SortBy option[value="best-selling"]').attr('selected', true).trigger('change');
      }else{
        $('#SortBy option[value="'+selval+'"]').attr('selected', true).trigger('change');
      }
    }
    //if it is filterby item
    if($('#FilterTags option[value="'+selval+'"]').length){
      if(_this.hasClass('active')){
        //select default selector
        $('#FilterTags option:first').attr('selected', true).trigger('change');
      }else{
        $('#FilterTags option[value="'+selval+'"]').attr('selected', true).trigger('change');
      }
    }
  }
  //onselect sortby or filterby
  $('.fake-sort-listing li').click(function(){
    var _this = $(this);
    var selval = _this.attr('data-value');
    //can be sortby or filterby
    //if it is sortby item1
    sortingaction(selval,_this);
  });
  
  $('.fake-filter-title').click(function(){
    $('.fake-sort-listing').slideToggle();
  });
  //list all selected filters
  var activeitem = '';
  $('.fake-sort-listing li').each(function(){
    var _this = $(this);
    if(_this.hasClass('active')){
      activeitem += '<span class="active" data-attr="'+_this.attr('data-value')+'">'+$(this).text()+' <i class="fa fa-times"></i></span>';
    }
  });
  $('.active-sorting').html(activeitem);
  // cross button on selected filters to remove filter
  $(document).on('click','.active-sorting span i',function(){
  var selval = $(this).parent().attr('data-attr');
    sortingaction(selval,$(this).parent());
  });

});

 

This has been developed on Debut shopify default theme. While using other theme, you need to take care of the default sorting dropdown element class/id.

Happy coding.

Cheers!

 

Suman K.C

eCommerce Developer, writes about stuff related to eCommerce development. Currently based in Kathmandu, loves reading about startups & new technology, introvert nature, fond of traveling & playing futsal.

More Posts