Re: Customise sorting option on Collection page

Solved

Customise sorting option on Collection page

Warmderlend
Tourist
10 0 1

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

Accepted Solutions (2)

Jasoliya
Shopify Partner
4820 625 1224

This is an accepted solution.

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Partner
4820 625 1224

This is an accepted solution.

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 15 (15)

Jasoliya
Shopify Partner
4820 625 1224

This is an accepted solution.

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Warmderlend
Tourist
10 0 1

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 ?

Jasoliya
Shopify Partner
4820 625 1224

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Jasoliya
Shopify Partner
4820 625 1224

This is an accepted solution.

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Admin2021
Excursionist
15 2 1

Thanks for the above @Jasoliya 

Is there a way to ADD a sort option?

 

As several people have noted elsewhere  'Sort by' : Date, old to new,    or Date, new to old 

use the date-time the Product was added to the database - and unless products are added in the right sequence when first creating the store, there seems no way of altering/correctling it subsequently.

 

The best alternative for us would be to replace these two sorts with their 'Sort by'  : SKU equivalents

- as (in our case) low skus are older than higher skus.

Jasoliya
Shopify Partner
4820 625 1224

No we cant add short option, you can add filter for that but not under short box

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Admin2021
Excursionist
15 2 1

Looks like a solution/workaround to sorting by (created!)Date is here:

https://community.shopify.com/c/shopify-design/collection-sorted-by-publish-date/m-p/1321205#M344952

Thanks to @Itai-Koren

 

JAH29
Visitor
1 0 0

This solution worked for a full width website.

Unfortunately, the mobile version of the dawn theme still shows all the sort options. What am I missing?

sylkstore
Tourist
6 0 2

hey im having the same issue but for dawn 2.0

 

is there a way i can edit the order of the sort list (and what comes up first when page is loaded)

 

and also remove some of these too?

 

 

thank you 

Rahulsinh
Shopify Partner
2 0 0

Hi,

Thank you so much for this it really worked for my website. I searched a lot of queries for this.

But my only problem is that it's not working on the mobile. Since the mobile code is different.

I am pasting it here for your reference. Let me know if you have a solution for this.

The sort by option is combined within my filter option in mobile view using the code below. is there anyway I can separate filter and sort by just like my desktop screen view.

 

<div class="filter-container filter-container--side{% if section.settings.collapse_tag_sidebar_by_default == false %} filter-container--show-filters-desktop{% endif %}" data-ajax-container>
{% if section.settings.coll_show_sort or show_filters %}
{% render 'faceted-filters', filter_context: collection, clear_url: collection.url, current_sort: current_sort %}
{% endif %}

4sportnutrition
Visitor
2 0 0

Hi Jasoliya,

 

Can you help us set the custom default sort type, so all out of stock products push to the end of the collection list?

Jasoliya
Shopify Partner
4820 625 1224

Hi @4sportnutrition 

This is not support to wok with css for that need custom liquid code based on theme 

best regard 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
4sportnutrition
Visitor
2 0 0

Yes, that's what I meant, to hire you for this task. 

 

But we already fixed this task with other developer.

Thank you.

socialbuzzoid
Visitor
2 0 0

How to translate this dropdown text into japanease. my website is https://socialbuzzoid.com

https://socialbuzzoid.com/product/free-instagram-followers/
Jasoliya
Shopify Partner
4820 625 1224

For that need to custom code it,

this is english version, that you can translate and replace on exiting place

 

<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>

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here