Liquid, JavaScript, themes, sales channels
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
Website: https://zaracouture.co.uk/
password: enter
Solved! Go to the solution
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.
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.
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 %}
Yep. Replace that line with the code I've provided.
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
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
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.
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
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%;
}
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
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 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
Hi, i did as instructed and it does not work, can you please help.
Would The Code you Provided word For The side Bar Menu group filtering ?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024