Need Help with Shopify Free Theme Filter Sorting Issue

[dreamtechzone_5]

Hello everyone!

I’m using the Shopify Free theme. I want to put the filter (Date, new to old) option above Most relevant.
Could anyone please help me fix this issue? Give me the full update code. Thanks in advance!

Store: https://blue-chic-clothes.myshopify.com/
Password: Admin

[Mustafa_Ali]

@dreamtechzone_5

Admin

Hey @dreamtechzone_5 so you want to set the filter more relevant for that you don’t need any code to do this so follow these steps to update the collection so first of all open the Shopify admin dashboard and then in your left hand side click the products option and then click the collection option and then choose that collection that you want to update like CLOTHING after that open that collection scroll down and then you see the option of sort by like this

simple choose that option that you want to update
if it is help full to you then don’t forget to LIKE and MARK AS SOLUTION on it
best
MUSTAFA

[dreamtechzone_5]

I know this. But (Date, new to old) is showing below. I want to put it above (Most relevant).

[Mustafa_Ali]

Hey @dreamtechzone_5 it can’t be possible because it’s a by default setting by Shopify
best
Mustafa

[mastroke]

Hi @dreamtechzone_5 kindly implement the below solution i hope this will Work
Step 1 : Go to the edit code theme and search facets.liquid file and

Search the Select sorting option id=“SortBy”
Original Code :

<select

  name="sort_by"

  class="facet-filters__sort select__select caption-large"

  id="SortBy"

  aria-describedby="a11y-refresh-page-message"

>

  {%- for option in results.sort_options -%}

    <option

      value="{{ option.value | escape }}"

      {% if option.value == sort_by %}

        selected="selected"

      {% endif %}

    >

      {{ option.name | escape }}

    </option>

  {%- endfor -%}

</select>

Refer below screenshot:

Step 2 : Replace the above code with below updated code for the desktop version :

Updated Code :

<select

  name="sort_by"

  class="facet-filters__sort select__select caption-large"

  id="SortBy"

  aria-describedby="a11y-refresh-page-message"

>

  {%- assign sort_by = results.sort_by | default: 'created-descending' -%}

  {%- for option in results.sort_options -%}

    {%- if option.value == 'created-descending' -%}

      <option

        value="{{ option.value | escape }}"

        {% if option.value == sort_by %}

          selected="selected"

        {% endif %}

      >

        {{ option.name | escape }}

      </option>

    {%- endif -%}

  {%- endfor -%}



  {%- for option in results.sort_options -%}

    {%- unless option.value == 'created-descending' or option.value == 'created-ascending' -%}

      <option

        value="{{ option.value | escape }}"

        {% if option.value == sort_by %}

          selected="selected"

        {% endif %}

      >

        {{ option.name | escape }}

      </option>

    {%- endunless -%}

  {%- endfor -%}

  {%- for option in results.sort_options -%}

    {%- if option.value == 'created-ascending' -%}

      <option

        value="{{ option.value | escape }}"

        {% if option.value == sort_by %}

          selected="selected"

        {% endif %}

      >

        {{ option.name | escape }}

      </option>

    {%- endif -%}

  {%- endfor -%}

</select>

For the Mobile Version

Step 3 : Go to the edit code theme and search facets.liquid file and

search the tag or class=“select_select” or id =“SortBy_mobile” and refer below screenshot

Original code :

<select

  name="sort_by"

  class="select__select"

  id="SortBy-mobile"

  aria-describedby="a11y-refresh-page-message"

>

  {%- for option in results.sort_options -%}

    <option

      value="{{ option.value | escape }}"

      {% if option.value == sort_by %}

        selected="selected"

      {% endif %}

    >

      {{ option.name | escape }}

    </option>

  {%- endfor -%}

</select>

Step 2 : Replace the above code with below updated code for the Mobile version :

Updated Code :

{%- assign sort_by = results.sort_by | default: 'created-descending' -%}

<select

  name="sort_by"

  class="select__select"

  id="SortBy-mobile"

  aria-describedby="a11y-refresh-page-message"

>

  {%- for option in results.sort_options -%}

    {%- if option.value == 'created-descending' -%}

      <option

        value="{{ option.value | escape }}"

        selected="selected"

      >

        {{ option.name | escape }}

      </option>

    {%- endif -%}

  {%- endfor -%}



  {%- for option in results.sort_options -%}

    {%- unless option.value == 'created-descending' or option.value == 'created-ascending' -%}

      <option

        value="{{ option.value | escape }}"

        {% if option.value == sort_by %}

          selected="selected"

        {% endif %}

      >

        {{ option.name | escape }}

      </option>

    {%- endunless -%}

  {%- endfor -%}



  {%- for option in results.sort_options -%}

    {%- if option.value == 'created-ascending' -%}

      <option

        value="{{ option.value | escape }}"

      >

        {{ option.name | escape }}

      </option>

    {%- endif -%}

  {%- endfor -%}

</select>

Output :
Desktop Version:

Mobile Version:

…