How to re order filter tag dropdown on Collection pages - Debut Theme

[umair91]

Hello,

I am a beginner in the code on Shopify and not able to re-order filter tags on collection pages. I searched and followed these below solutions but not able to achieve it as I dont understand the code and where to edit it to meet my requirements.

https://community.shopify.com/c/Technical-Q-A/Re-Ordering-tags-in-drop-down-filters/m-p/1026453#M44221
https://community.shopify.com/c/Shopify-Discussion/Product-tags-sort-order/td-p/19289

I understand its Alphabaitcal by default but I just want to reorder in a way that my Pre Order and In Store shows at the end of the list. Idea is to show these long names at the end after all other tags.

Screen shots

Website: https://zaracouture.co.uk/

password: enter

[tim_1]

One way to approach it is like this –

The code to output tag-based filter usually has a loop similar to:

  {% for tag in collection.all_tags %}
  ...

You can change it like this:

{% assign order_tags = "XXS,XS,S,M,L,XL,XXL,In Store,Preorder" | split: "," %}
{% for tag in order_tags %}
  {% unless collection.all_tags contains tag %} 
    {% continue %} 
  {% endunless %}
  ...

Note that comparison is case-sensitive here and there is no spaces in the order_tags variable.

This way order of tags will be defined by their order in the order_tags variable. And tags which are not in this list will not be show at all.

[umair91]

Hi @tim_1

Thank you so much for the code. Below is the Code I have in my collection.template.liquid file.

{% if is_filter_by_available or section.settings.sort_enable %}
      
        

          

            

              {% if section.settings.tags_enable %}
                {% unless collection.all_tags.size == 0 %}
                  

                    
                    

                      
                      {% include 'icon-chevron-down' %}
                    

                  

                {% endunless %}
              {% endif %}

Should I replace the code you provided with the existing one. In above code, I have this part in the middle starting from

 {% for tag in collection.all_tags %}

[tim_1]

Yep. Replace that line with the code I’ve provided.

[umair91]

Oh thank you so much for this. I

replaced this line

{% for tag in collection.all_tags %}

with

{% assign order_tags = "XXS,XS,S,M,L,XL,XXL,In Store,Preorder" | split: "," %}
{% for tag in order_tags %}
  {% unless collection.all_tags contains tag %} 
    {% continue %} 
  {% endunless %}
  ...

and it worked fine
Also, I followed your instructions and got the results with case sensitivity. I put the space in tags to let them work.

Thank you so much for the quick rescue

[Trisgaard]

Hi

I have the exact same issue with my website. But I have two filters that needs to be re-ordered. Can I just add more values for both filters in the same string?

Best regards Tina

[tim_1]

Tina, this depends on how your code is done, can you at least share a (preview) link so I can see what you already have as I do not know how your filters are done.

[Trisgaard]

Hi Tim

Thanks for your reply. And sorry about the missing information - I am new to this

My webpage is:

yisforyarn.com

Code: eususe

On the page with all produckts (https://yisforyarn.com/collections/all) I have made search filters using the app Ultimate Product filter + search

As I mentioned I have two filter options that as for now are in a wrong order. In the snip below you se the filters - marked with red. Obviously I would like the filter “Pind” to be in the order Pind 2, Pind 3, Pind 4 etc. and the filter “Strikkefasthed” should be in the order: 30- 26m, 28- 26 m, 26- 23 m, 22- 20 m, 19-16 m, 11-9 m

Another issue I have at the moment is on my product pages. I am using two options but I only want to show the first on on the product page. Can you help me with a solution to remove the second one? I marked the one to remove on the snip below.

The reason is, that the first one (Color) is all the different colors that particular yarn comes in. And that I need on my product page. The other one (Farve) is something I have created to be able to filter on some color-groups. That is all different pink shades is filed under “pink” so that costumers can search on all pink shades at once. But it should not be visible on the Product page.

Please let me know if you need anything else

And thanks

/Tina

[tim_1]

Huh, since you’re using App for filtering, the solution above would not work for you. However, I assume you’ve created your filter groups manually, since you do not have prefixes on your tags. If this is the case, then you can sort the tags inside groups as per the app manual – look at Case 1, step 9.

As for your second question, I think your way of doing it is a bit unusual, but anyway, if you’re absolutely sure that you need to hide second variant selector on all product pages, then this can be done by adding a rule like this to the very bottom of your theme.scss.liquid asset:

/* hide second drop-down on product page */
.selector-wrapper:nth-child(2) {
    display: none;
}
/* add this to make first selector full-width */
.selector-wrapper:nth-child(1) {
    flex-basis: 100%;
}

[Trisgaard]

Thank you

And I am sure my way is a bit unusual as I most of the time have no idea what I am doing

Best regards Tina

[RAYNO]

Hi, i did as instructed and it does not work, can you please help.

[Bostonpeddler]

Would The Code you Provided word For The side Bar Menu group filtering ?

[winewarehouse]

Hello!

How do I reorder these drop down filters? I want to put it in the order below:

Under $20

$20 - $40

$40 - $80

$80 or above

[PaulNewton]

@winewarehouse

How do I reorder these drop down filters? I want to put it in the order below:

Under $20

$20 - $40

$40 - $80

$80 or above

Hello! You would follow the example code in the solution change the sizes out for your tags.

That’s the basics as after that what and where you may need to modify things varies wildly by theme.