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

0 Likes
tim
Shopify Expert
2862 118 938

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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
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 %}

 

0 Likes
tim
Shopify Expert
2862 118 938

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

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
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 

0 Likes
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

0 Likes
tim
Shopify Expert
2862 118 938

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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
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

 

 

0 Likes
tim
Shopify Expert
2862 118 938

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

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
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

0 Likes