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 |
---|---|
181 | |
150 | |
69 | |
46 | |
34 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023