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 |
---|---|
69 | |
65 | |
63 | |
53 | |
47 |
We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023