FROM CACHE - en_header

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

Solved
umair91
Tourist
6 0 1

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#M442...
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

Screen Shot 2021-01-18 at 4.33.03 PM.png Screen Shot 2021-01-18 at 6.35.42 PM.png

 

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

password: enter

Accepted Solution (1)

Accepted Solutions
tim
Shopify Expert
3040 170 1097

This is an accepted solution.

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.

My post solved your problem? Like it!

View solution in original post

Replies 13 (13)
tim
Shopify Expert
3040 170 1097

This is an accepted solution.

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.

My post solved your problem? Like it!
umair91
Tourist
6 0 1

Hi @tim 

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 %}
      <div class="filters-toolbar-wrapper{% if is_filter_by_available %} filters-toolbar--has-filter{% endif %}">
        <div class="page-width">
          <div class="filters-toolbar">
            <div class="filters-toolbar__item-wrapper">
              {% if section.settings.tags_enable %}
                {% unless collection.all_tags.size == 0 %}
                  <div class="filters-toolbar__item-child">
                    <label class="filters-toolbar__label select-label" for="FilterTags">{{ 'collections.filters.title_tags' | t }}</label>
                    <div class="filters-toolbar__input-wrapper select-group">
                      <select class="filters-toolbar__input hidden" name="FilterTags" id="FilterTags" aria-describedby="a11y-refresh-page-message a11y-selection-message" data-select-input>
                        <option value="{{ collection.url }}">{{ 'collections.filters.all_tags' | t }}</option>
                        {% for tag in collection.all_tags %}
                          {%- assign new_url = tag | link_to_tag: tag | split: 'href="' | last | split: '"' | first -%}
                          <option value="{{ new_url }}"{% if current_tags contains tag %} selected="selected"{% endif %}>{{ tag }}</option>
                        {% endfor %}
                      </select>
                      {% include 'icon-chevron-down' %}
                    </div>
                  </div>
                {% 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
Shopify Expert
3040 170 1097

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

My post solved your problem? Like it!
umair91
Tourist
6 0 1

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
New Member
3 0 0

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
Shopify Expert
3040 170 1097

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.

My post solved your problem? Like it!
Trisgaard
New Member
3 0 0

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

 

Trisgaard_1-1611774694831.png

 

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. 

Trisgaard_2-1611775026679.png

 

Please let me know if you need anything else 🙂

And thanks

/Tina

 

 

tim
Shopify Expert
3040 170 1097

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%;
}

 

My post solved your problem? Like it!
Trisgaard
New Member
3 0 0

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
New Member
1 0 0

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

code for tags.PNG

Bostonpeddler
Tourist
3 1 0

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

winewarehouse
Tourist
13 0 1

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

winewarehouse_0-1633209339731.png

 

PaulNewton
Shopify Partner
4219 304 903

@winewarehouse wrote:

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.

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com