Customise sorting option on Collection page

Solved
Tourist
10 0 0

Hi. I'm currently using Narrative theme and I want to delete some sorting options and customise some of them. But I'm struggle to find the bit of code for that.

Untitled-1 copy.jpg

Thanks you in advandce.

My site is https://warmderland.myshopify.com/ .The password is bukrao

0 Likes
Highlighted

Success.

Shopify Expert
2930 499 671

Hi @Warmderlend 

In this theme we have no option to customize this short option as its generating by shopify.

But we can do some custom code to remove some option. like this

1. Open Section->collection-template.liquid and then find 'collection.sort_options'

Now add unless condition like below so they can remove added option from box.

 

{% for option in collection.sort_options %}
       {% unless option.value contains 'title-ascending' or option.value contains 'title-descending' %}
              <option value="{{ option.value }}"{% if sort_by == option.value %} selected="selected"{% endif %}>{{ option.name }}</option>
       {% endunless %}
{% endfor %}

So here they remove 'Alphabetically, A-Z' and Alphabetically, Z-A option.

 

You have to add condition in below line more if you want to hide option

 

 {% unless option.value contains 'title-ascending' or option.value contains 'title-descending' %}

You can use following option in condition:

1. manual

2. best-selling

3. title-ascending

4. title-descending

5. price-ascending

6. price-descending

7. created-ascending

8. created-descending

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
10 0 0

Thank you so so much.
But is there a way I can change the name like "Date, new to old" to "New Arrival"? or it's just like that ?

0 Likes
Highlighted
Shopify Expert
2930 499 671

No because this all option generate by shopify, if you want to add your custom option only then you have to create i by custom code. and remove shopify code. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted

Success.

Shopify Expert
2930 499 671

If you want to add custom option then we have total this option:

<select name="sort_by" id="SortBy" aria-describedby="a11y-refresh-page-message" class="collection-sort__input">
    <option value="manual">Featured</option>
    <option value="best-selling" selected="selected">Best selling</option>
    <option value="title-ascending">Alphabetically, A-Z</option>
    <option value="title-descending">Alphabetically, Z-A</option>
    <option value="price-ascending">Price, low to high</option>
    <option value="price-descending">Price, high to low</option>
    <option value="created-ascending">Date, old to new</option>
    <option value="created-descending">Date, new to old</option>
</select>

Remove below code and add this above code:

<select name="sort_by" id="SortBy" aria-describedby="a11y-refresh-page-message" class="collection-sort__input">
    {% for option in collection.sort_options %}
        <option value="{{ option.value }}"{% if sort_by == option.value %} selected="selected"{% endif %}>{{ option.name }}</option>
    {% endfor %}
</select>

In this you can change text of this option as you want but cant change value

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like