Shopify themes, liquid, logos, and UX
Hello!
I added collection filter dropdown menus following this tutorial. The problem is that when I use a filter in a collection the rest of the posible filter values dissapear. Here are some snippets to see what I mean:
I was wondering would it be possible that all of the available tags within this collection stays in this dropdown e.g. in second snippet the "SV650" product tag still would be visible? It just seems a bit weird that I need to select "All" and then the "SV650" tag to filter only products with this tag. Hope you understood my problem!
Page preview available here.
Thanks in advance!
Regards,
Kuciks
Solved! Go to the solution
This is an accepted solution.
Okay so I managed to fix this problem. If anyone else has this problem and you follow the tutorial I mentioned above. In coll-filter class:
<div class="four-columns">
<p>Category:</p>
<select class="coll-filter">
<option value="">All</option>
{% for tag in collection.tags %}
{% if tag contains 'category-' %}
{% assign tagName = tag | remove: 'category-' %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tagName }}</option>
{% else %}
<option value="{{ tag | handle }}">{{ tagName }}</option>
{% endif %}
{% endif %}
{% endfor %}
</select>
</div>
In line where is the for loop: "{% for tag in collection.tags %}" you should use attribute .all_tags and it fixes this problem
Hello again! So is this doable by myself or I should be considering hiring a Shopify professional to do this?
This is an accepted solution.
Okay so I managed to fix this problem. If anyone else has this problem and you follow the tutorial I mentioned above. In coll-filter class:
<div class="four-columns">
<p>Category:</p>
<select class="coll-filter">
<option value="">All</option>
{% for tag in collection.tags %}
{% if tag contains 'category-' %}
{% assign tagName = tag | remove: 'category-' %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tagName }}</option>
{% else %}
<option value="{{ tag | handle }}">{{ tagName }}</option>
{% endif %}
{% endif %}
{% endfor %}
</select>
</div>
In line where is the for loop: "{% for tag in collection.tags %}" you should use attribute .all_tags and it fixes this problem
I have three filter shown at the header, but when I use the filter, it turns out there is no product in this collection. Do you know why?
Thank you in advanced.
User | RANK |
---|---|
130 | |
91 | |
77 | |
60 | |
55 |
There’s no one-size-fits-all commerce solution, so we keep innovating to help every size b...
By Jasoh Feb 9, 2023Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023