Remove Sort Menu Options on Debut theme

Not applicable

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. 

 

IntendedIntendedCurrentCurrent

Replies 19 (19)

Bo
Shopify Staff (Retired)
1793 196 467

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 

To learn more visit the Shopify Help Center or the Community Blog.

grasshopper
Visitor
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?

Bo
Shopify Staff (Retired)
1793 196 467

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 

To learn more visit the Shopify Help Center or the Community Blog.

grasshopper
Visitor
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.

ARTSKUL
Tourist
4 0 1

Hi Bo or Shopify Staff member, 

How do I remove best-selling from the filter?

Bo
Shopify Staff (Retired)
1793 196 467

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

To learn more visit the Shopify Help Center or the Community Blog.

ARTSKUL
Tourist
4 0 1
Thanks Bo 😊

d


Ali82
Visitor
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! 

MSotherden
Visitor
2 0 6

Hi Bo - is this still the appropriate solution for the debut theme to refine the "sort by" menu? Thanks! I'm trying to eliminate alphabetical sorting from my shop as it's not cohesive for my products.

MSotherden

MayurBaldha
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 

Bo
Shopify Staff (Retired)
1793 196 467

 

Hey there, @MayurBaldha 

 

This can be updated in the admin, just switch to a different filter option in the collection itself:

So, you will need to go to the Admin > Products > Collections and then change the sort by in your collections to be anything but Best Selling - this will remove it as an option in the collections after you have made the theme change. 

 

All the Best,

Bo

To learn more visit the Shopify Help Center or the Community Blog.

Not applicable

Hi Bo,

Any idea how I can make my "sort by" options longer width on mobile view? My url is: nutraesse.com

Currently, it looks like this:

IMG_1107.PNG

1LT
Visitor
3 0 0

EDIT: I found the painfully obvious solution in customizer. I'd delete this post if there was an option for it.

 

I did this and it did not work.

In my Debut theme, the  {%- for option in collection.sort_options -%}  code is on line 110. Everything else covered in the tutorial is the same. I have not edited this page before. Any idea? My goal is to totally remove the sorting options because I only have 2 items.

Thanks

lichiverdeselva
Tourist
7 0 1

Hi Bo,

 

I have traed to change my code with your instructions but in my code does not appear. can you help me, i am in the Brooklyn theme! thanks


@1LT wrote:

EDIT: I found the painfully obvious solution in customizer. I'd delete this post if there was an option for it.

 

I did this and it did not work.

In my Debut theme, the  {%- for option in collection.sort_options -%}  code is on line 110. Everything else covered in the tutorial is the same. I have not edited this page before. Any idea? My goal is to totally remove the sorting options because I only have 2 items.

Thanks


 

Instead it look like this:

 

<!-- /templates/collection.liquid -->
{%- if section.settings.show_collection_image and collection.image -%}
<div class="collection-hero">
<noscript>
<div class="collection-hero__image-no-js" style="background-image:url({{ collection.image | img_url: '2048x2048' }});"></div>
</noscript>
{%- assign img_url = collection.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- comment -%}
If the collection.image height is < 70% of its width on mobile or < 45% on desktop,
we crop the container to make sure it's the same height as the image.
{%- endcomment -%}
{%- assign height_width_ratio = 100 | divided_by: collection.image.aspect_ratio | floor -%}
{%- if height_width_ratio < 70 -%}
<style>
{%- if height_width_ratio < 45 -%}
.collection-hero__image-wrapper::after {
padding-bottom: {{ height_width_ratio }}%;
}
{%- else -%}
@media screen and (max-width: 768px) {
.collection-hero__image-wrapper::after {
padding-bottom: {{ height_width_ratio }}%;
}
}
{%- endif -%}
</style>
{%- endif -%}
<div class="collection-hero__image-wrapper">
<img class="collection-hero__image lazyload"
src="{{ collection.image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ collection.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
alt="{{ collection.image.alt | escape }}">
</div>
</div>
{%- endif -%}

<div id="CollectionSection" data-section-id="{{ section.id }}" data-section-type="collection-template" data-grid-type="{{ section.settings.collection_products_grid }}">
{%- paginate collection.products by 12 -%}
<header class="section-header text-center">
<h1>{{ collection.title }}</h1>
<hr class="hr--small">
{%- if collection.description != blank -%}
<div class="grid">
<div class="grid__item">
<div class="rte">
{{ collection.description }}
</div>
</div>
</div>
{%- endif -%}

<div class="grid--full collection-sorting{% if section.settings.collection_sort_enable %} collection-sorting--enabled{% endif %}">
{%- if section.settings.collection_sort_enable -%}
{%- include 'collection-sorting' -%}
{%- endif -%}
</div>

{%- if section.settings.collection_tags_enable -%}
{%- if collection.all_tags.size > 0 -%}
{%- if section.settings.collection_sort_enable -%}
<hr class="hr--small hr--clear">
{%- endif -%}
<ul class="tags tags--collection inline-list">
{% comment %}
Used for the catalog collection (/collections/all) and product collections (collections/{collection.handle})
{% endcomment %}
<li{% unless current_tags %} class="tag--active"{% endunless %}>
<a href="{% if collection.url == blank %}{{ routes.all_products_collection_url }}{% else %}{{ collection.url }}{% endif %}">
{{ 'collections.general.all_of_collection' | t }}
</a>
</li>

{%- for tag in collection.all_tags -%}
{%- if current_tags contains tag -%}
<li class="tag--active">
{{ tag | link_to_remove_tag: tag }}
</li>
{%- else -%}
<li>
{% comment %}
Use link_to_add_tag if you want to allow filtering
by multiple tags
{% endcomment %}
{{ tag | link_to_tag: tag }}
</li>
{%- endif -%}
{%- endfor -%}
</ul>
{%- endif -%}
{%- endif -%}

{%- if section.settings.collection_tags_enable -%}
<hr class="hr--small hr--clear">
{%- endif -%}
</header>

{%- if section.settings.collection_products_grid == 'collage' -%}
<div class="grid grid-collage">
{% comment %}
Loop through our products in the current collection.
See the snippet 'snippets/product-grid-collage.liquid'.

`is_reverse_row__product`, `three_row_index__product`, `collection_product_count`, and `divisible_by_three__product` are
all used by 'snippets/product-grid-collage.liquid'
{% endcomment %}
{%- assign is_reverse_row__product = false -%}
{%- assign three_row_index__product = 0 -%}
{%- assign collection_product_count__product = collection.products.size -%}
{%- assign divisible_by_three__product = collection_product_count__product | modulo:3 -%}
{%- for product in collection.products -%}
{%- include 'product-grid-collage' -%}
{%- else -%}

{%- if shop.products_count == 0 -%}
{% comment %}
Add default products to help with onboarding for collections/all only
{% endcomment %}
{% include 'onboarding-featured-products' -%}
{%- else -%}
{% comment %}
If collection exists but is empty, display message
{% endcomment %}
<div class="grid__item text-center">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{%- endif -%}
{%- endfor -%}

</div>
{%- elsif section.settings.collection_products_grid == 'grid' -%}
<div class="grid-uniform">
{%- assign grid_item_width = 'medium--one-half large--one-third' -%}
{%- for product in collection.products -%}
{%- include 'product-grid-item' -%}
{%- else -%}
{%- if collection.handle == 'all' -%}
{% comment %}
Add default products to help with onboarding for collections/all only
{% endcomment %}
{%- include 'onboarding-featured-products' -%}
{%- else -%}
{% comment %}
If collection exists but is empty, display message
{% endcomment %}
<div class="grid__item text-center">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{%- endif -%}
{%- endfor -%}
</div>
{%- endif -%}

{%- if paginate.pages > 1 -%}
{%- include 'pagination' -%}
{%- endif -%}

{%- endpaginate -%}
</div>

 

{% schema %}

lichiverdeselva
Tourist
7 0 1

Hi! i made it for Brooklyn theme you have to do it in the snippet carpeta and not the section one 🙂 

 

Thank you, your post was very helpful! 

Rowannola
Visitor
1 0 0

how do i remove my post?

olesmokycandy
Tourist
8 0 1

Bo,

 

I do not know if you are still with support at shopify....but I have this same exact issue with the theme NARRATIVE. 

Would I follow the exact code you provided from 2019?

 

I sell chocolates and want to remove the date, old to new / date, new to old 

options on the dropdown bar??

 

<option value="created-ascending">Date, old to new</option>

<option value="created-descending">Date, new to old</option>

 

Thank you so much for any help you may offer,

Heather

 

danatsprad
Visitor
1 0 0

Hello!

is there a solution working with the current debut theme? The solution provided here from 2019 does not seem to work anymore.

Thanks so much!

paparis69
Visitor
1 0 0

how do I remove sort by color option?