Solved

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

umair91
Tourist
8 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)

tim
Shopify Expert
3258 232 1178

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.

View solution in original post

Replies 13 (13)

tim
Shopify Expert
3258 232 1178

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.

umair91
Tourist
8 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
3258 232 1178

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

umair91
Tourist
8 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
Visitor
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
3258 232 1178

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
Visitor
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
3258 232 1178

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

winewarehouse
Tourist
14 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
6274 573 1319

@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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


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