Remove Sort Menu Options on Debut theme

Anonymous
Not applicable
0 0 54

Hi,

 

I'd like to remove the options on the sort menu of my Shopify store using the debut team, as I find it too cluttering. 

 

Screen Shot 2019-03-31 at 12.03.59 PM.pngIntendedScreen Shot 2019-03-31 at 12.05.31 PM.pngCurrent

0 Likes
Shopify Staff
Shopify Staff
645 60 127

Hey there, @Anonymous 

 

Bo here from Shopify Support! 

 

This is a great question and the desired effect can be achieved with a little code. This tutorial is specific to an unedited version of the Debut theme, (VERSION 11.2.0). We cannot guarantee results for themes that have been modified with custom coding and/or apps. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial, or wish to make any variations to this tutorial.

 

  • Go to Online Store > Actions > Duplicate. The reason for this being that you can make this edit on the duplicate and then publish it when you are sure it has worked.
  • Beside "Copy of Debut" click Actions > Edit Code.
  • Go to Sections > collection-template.liquid.
  • In line 124 locate the following: {%- for option in collection.sort_options -%}
  • Under this you will put the following code:
{% unless option.value == 'manual' or option.value == 'title-ascending' or option.value == 'title-descending' or option.value=='created-ascending' or option.value == 'created-descending' %}
  • On the line under this code add {% endunless %}
  • The finished code will look like this: 
                      {%- for option in collection.sort_options -%}{% unless option.value == 'manual' or option.value == 'title-ascending' or option.value == 'title-descending' or option.value=='created-ascending' or option.value == 'created-descending' %}
                        <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>{{ option.name }}</option>
                      {% endunless %}
                      {%- endfor -%}
  • Click Save and Preview the theme. If you are happy with how it looks, you can publish it! 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo 

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

2 Likes
New Member
2 0 1

I'd like to remove the two sort by price options in the debut theme. What code would I use to get that done?

1 Like
Highlighted
Shopify Staff
Shopify Staff
645 60 127

Hey there, @grasshopper 

 

  • To do this, follow all of the steps above and substitute the code mentioned with the following under line 124:
{% unless option.value == 'price-ascending' or option.value=='price-descending %}
  • On the line under this code add {% endunless %}
  • The finished code will look like this: 
 {%- for option in collection.sort_options -%}{% unless option.value == 'price-ascending' or option.value=='price-descending %} 
                        <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>{{ option.name }}</option>
                      {% endunless %}
{%- endfor -%}

  • Click Save and Preview the theme. If you are happy with how it looks, you can publish it! 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo 

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
2 0 1

Thanks, that's what I thought it would be but just wanted to confirm the syntax. Worked like a charm. (You missed a closing single quote, but I added it in). I appreciate the quick response.

0 Likes

Hi Bo or Shopify Staff member, 

How do I remove best-selling from the filter?

0 Likes
Shopify Staff
Shopify Staff
645 60 127

Hey there, @ARTSKUL 

 

Bo here from Shopify Support! 

 

Great question. This will be done a little differently than the changes above. We will instead be adding some code to the very bottom of the theme.scss.liquid. 

 

NB When editing the CSS of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. This will prevent any errors from occurring on your live site. We also recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code will overwrite the previous code.

 

Go to Online Store > Actions > Edit Code. Open the Assets Folder > theme.scss.liquid and scroll to the very bottom of the file. Add the following code: 

#SortBy {
 option[value=best-selling] {
   display: none;
 }
}

 

Click Save.

 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Thanks Bo 😊

d


1 Like
New Member
1 0 0

Hi! I wanted to add in an ‘availability’ sort by option so that customers can sort to have in stock items first. I’m using Sunrise theme - anyone know if there’s a way to do this?

 

Thank you! 

0 Likes
New Member
4 0 0

But when collection page opens, it shows sorting by default "best selling" how to change by default sort by settings 

0 Likes