Shopify themes, liquid, logos, and UX
I want to get rid of the alphabetical options and the date options but can't find the code to do so. Can anyone help me out?
Thank you in advance!
Hi,
I think its Boundless theme if so then follow bellow:
1. Go to Online Store->Theme->Edit code
2. Section->collection-template.liquid->find id="SortBy" and remove option from here and save.
Note:If not then send me your store URL and theme name.
Let me know if you want help.
That would be only if I wanted to delete the entire thing but I only want to delete a few options.
Website URL: Fucsun.com
theme: Boundless
Yes, from this instruction you can remove any option from select box.
You can see like this on page:
<select name="SortBy" id="SortBy" data-value="{{ collection.sort_by | default: collection.default_sort_by | escape }}"> <option value="manual">{{ 'collections.sorting.featured' | t }}</option> <option value="best-selling">{{ 'collections.sorting.best_selling' | t }}</option> <option value="title-ascending">{{ 'collections.sorting.az' | t }}</option> <option value="title-descending">{{ 'collections.sorting.za' | t }}</option> <option value="price-ascending">{{ 'collections.sorting.price_ascending' | t }}</option> <option value="price-descending">{{ 'collections.sorting.price_descending' | t }}</option> <option value="created-descending">{{ 'collections.sorting.date_descending' | t }}</option> <option value="created-ascending">{{ 'collections.sorting.date_ascending' | t }}</option> </select>
Remove bellow line from above code
<option value="title-ascending">{{ 'collections.sorting.az' | t }}</option> <option value="title-descending">{{ 'collections.sorting.za' | t }}</option>
Let me know if you need help.
I'm not given that option mine says this
Change like this:
{% 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%}
Note: just add unless and endunless condition
Let me know if need help.
Thanks, your answer was of great help to me.
I am new to Shopify and don't know much about it, so my first approach was to edit 'sort_options' object from which the for loop is extracting all the options but I couldn't find where all the data is defined. It would be very helpful if you could tell me where is this 'collection'/'sort_options' object stored or from where this theme is pulling all its data.
Thanks in advance.
Hi @arpitbanati
You can find this code in
1. Go to Online Store->Theme->Edit code
2. Section->collection-template.liquid->find id="SortBy"
Hi! This was very helpful in addition to removing the alphabetical option can you advise how to remove the 'date, old to new' date, new to old'
Thank you!
How can I change the possibilities, when I have this code:
<label for="SortBy" class="hidden-label">{{ 'collections.sorting.title' | t }}</label>
<select name="SortBy" id="SortBy">
<option value="title-ascending"{% if sort_by == collection.default_sort_by %} selected="selected"{% endif %}>{{ 'collections.sorting.title' | t }}</option>
{% for option in collection.sort_options %}
<option value="{{ option.value }}" {% unless default_sorted %}{% if option.value == sort_by %}selected="selected"{% endif %}{% endunless %}>{{ option.name }}</option>
{% endfor %}
</select>
</div>
The problem is: When i put your code in, I get this:
Translation missing en.collections.sortings.az
Try this
<select name="SortBy" id="SortBy" data-value="{{ collection.sort_by | default: collection.default_sort_by | escape }}"> <option value="manual">manual</option> <option value="best-selling">best selling</option> <option value="title-ascending">title ascending</option> <option value="title-descending">title descending</option> <option value="price-ascending">price ascending</option> <option value="price-descending">price descending</option> <option value="created-descending">reated descending</option> <option value="created-ascending">created ascending</option> </select>
Cool, that worked! 😄 Thanks a lot!! 😄
Which theme you have? because all code diffident for theme wise ..send store url
Hi there, I have Impulse theme and I use "Product filter & search by boost commerce" if that means something.
Here is my URL: www.satinski.com
Thank you for your advice!
This box generating by filter app, so you can do simple this css
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file
.boost-pfs-filter-top-sorting-select [value="created-descending"],.boost-pfs-filter-top-sorting-select [value="created-ascending"]{display:none;}
Hi there, that worked, thank you! However, I would love to dismiss also the alphabetical order (both A-->Z Z-->A). What should the code look like in this case? Thanks a lot in advance!
@Satinski add this:
.boost-pfs-filter-top-sorting-select [value="title-ascending"],.boost-pfs-filter-top-sorting-select [value="title-descending"]{display:none;}
Thanks a lot once again. I think I misspoke myself: I would like to dismiss both filters: Date and Alphabetical (4 items in total). By adding your last code I dismissed the alphabetical one but the date stayed there. The same happened when I pasted both codes together. Thanks for your help!
add this line too:
.boost-pfs-filter-top-sorting-select [value="title-ascending"],.boost-pfs-filter-top-sorting-select [value="title-descending"]{display:none;}
Thanks a lot!
The trick was in adding both of the codes:
.boost-pfs-filter-top-sorting-select [value="title-ascending"],.boost-pfs-filter-top-sorting-select [value="title-descending"]{display:none;}
.boost-pfs-filter-top-sorting-select [value="created-ascending"],.boost-pfs-filter-top-sorting-select [value="created-descending"]{display:none;}
Thank you! 🙂
Hi, would you be able to help me with removing a few sorty by options? I only want price low to high and best seller. I tried to follow what you have said here but I am having difficulty. We have empire theme. I don't see where I can change in the language editor. Thanks!
Hi @flybypinay
Send your store url
Add this css in Asset->theme.scss file at bottom:
#product_grid_sort [value="manual"],#product_grid_sort [value="best-selling"],#product_grid_sort [value="title-ascending"],#product_grid_sort [value="title-descending"],#product_grid_sort [value="price-descending"],#product_grid_sort [value="created-ascending"],#product_grid_sort [value="created-descending"]{display:none;}
Thank you for your response! Unfortunately, it didn't work.
Follow this
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss Or theme.css-> paste bellow code in bottom of file
#SortBy [value="title-ascending"],#SortBy [value="title-descending"],#SortBy [value="best-selling"]{display: none;}
Fantastic - spot on. Really appreciate this!
On a side note, do you know if it's possible to change the order? Ideally, I'd have:-
I have checked and its work fine, but if you are checking on IOS safari then it will not work as for IOS safari not support this, so for that must need custom Js code or liquid code manage.
Hi, i am using debut theme and i have been following your steps and options gone, but there's old options below sorting box
my shop is retromarche.pl/collections/all
<select name="SortBy" id="SortBy" data-value="{{ collection.sort_by | default: collection.default_sort_by | escape }}">
<option value="manual">manual</option>
<option value="price-ascending">price ascending</option>
<option value="price-descending">price descending</option>
</select>
and is it possible to show for example price ascending while i choose price ascending? because it always shows manual when i choose different sorting option
thanks in advance
You have already price low and price height option. what you want to do now?
Hello, I have the same problem "is it possible to show for example price ascending while i choose price ascending? because it always shows manual when i choose different sorting option"?
I used this code:
<select name="SortBy" id="SortBy" data-value="{{ collection.sort_by | default: collection.default_sort_by | escape }}">
<option value="manual">Recomandat</option>
<!--<option value="title-ascending">title ascending</option>-->
<!--<option value="title-descending">title descending</option>-->
<option value="price-ascending">Pret, de la mic la mare</option>
<option value="price-descending">Pret, de la mare la mic</option>
<option value="best-selling">Cele mai vandute</option>
<!--<option value="created-descending">reated descending</option>-->
<!--<option value="created-ascending">created ascending</option>-->
</select>
Could you help me? Thank you and have a nice day!
store www.wipeoutstore.com
Theme is Debut
I'd like to just remove the option to sort by Featured collection, price and date low to high. I'd like to keep bestsellers and A-Z, Z-A.
Thanks in advance, Julie
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file
#SortBy [value="manual"],#SortBy [value="price-ascending"],#SortBy [value="price-descending"],#SortBy [value="created-ascending"],#SortBy [value="created-descending"]{display:none;}
thank you! It worked
Hello !
I need help for theme Supply
i have this code in Snippets -> collection-sorting.liquid
<div class="form-horizontal">
{% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
<label for="sortBy" class="small--hide">{{ 'collections.sorting.title' | t }}</label>
<select name="sort_by" aria-describedby="a11y-refresh-page-message" id="sortBy">
{% for option in collection.sort_options %}
<option value="{{ option.value }}"{% if sort_by == option.value %} selected="selected"{% endif %}>{{ option.name }}</option>
{% endfor %}
</select>
</div>
<script>
Shopify.queryParams = {};
if (location.search.length) {
for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
aKeyValue = aCouples[i].split('=');
if (aKeyValue.length > 1) {
Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
}
}
}
$(function() {
$('#sortBy')
// select the current sort order
.val('{{ collection.sort_by | default: collection.default_sort_by | escape }}')
.bind('change', function() {
Shopify.queryParams.sort_by = jQuery(this).val();
location.search = jQuery.param(Shopify.queryParams).replace(/\+/g, '%20');
}
);
});
</script>
How can i remove some options i dont need ?
Send me your store url and option that and hat want to remove.
Hi there, your code has worked for www.wipeoutstore.com when viewed on a brower, but doesn't seem to have worked when viewed on a mobile? Can you fix that also? Julie
i can see its working fine. send me image where you see its not working on mobile.
Ohh i see, that because of hide proper not work on IOS safari on drop down.
for that need to make custom Js code or by liquid code to manage it cant we do by css. you can follow previous post if that help you for that you need code knowledge
Hi I am trying to remove these options below from the sort by drop down and I am not sure how to from my code. I have the debut theme.
Alphabetical, A-Z
Alphabetical, Z-A
Date, old to new
Date, new to old
Can someone please assist?
Thanks,
Alana
Send me store url will help
Hi @Jasoliya
Would it be possible to help....
I have the Impulse theme (frontiers-woman.com) - hoping to remove:-
Many thanks in advance.
Best,
Mark
Can you help me add back in ?
Date, old to new
Date, new to old
if I am trying this it adds 6 more sorting options in the list rather than removing some options.
what should I do?
Is it possible for you to put the instructions for how to remove the Sort By options: Featured, Old to New and New to Old.
Theme Debut.
Thank you!
Hello Jasoliya,
I used your code edits to remove “ascending” and “descending” from the theme boundless I am using. It worked for me, so thank you. I did have a question regarding this same drop down menu, is there any way to have the new selected option be “best-selling”? I cannot seem to figure it out on my own.
Thanks in advance to anyone who can assist me with this!
yes for best selling option you can add below html as option
<option value="best-selling" >Best selling</option>
Best regard
Add this code in theme.css at bottom
#sort-list li [data-name="Featured"],#sort-list li [data-name="Alphabetically, A-Z"],#sort-list li [data-name="Alphabetically, Z-A"],#sort-list li [data-name="Date, old to new"],#sort-list li [data-name="Date, new to old"]{display: none;}
Thank you so much. But some pages are still showing featured as the default. Not all have been fixed
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025