Using an image for a Product Tag filter on a Collection page

New Member
5 0 0

I have a collection page where I'm sorting products by Product Tag using the radio button method noted here.

 

I'm wondering if there's a way to use an image for each Product Tag rather than the radio button.

 

This is the sorting code and I'd like the <a></a> for link_to_tag to wrap around the image as well:

  {% for tag in collection.all_tags %}
    {% if current_tags contains tag %}
        <li class="active">
            {{ tag | link_to_remove_tag: tag }}
        </li>
    {% else %}
        <li>
            {{ tag | link_to_tag: tag }}
        </li>
    {% endif %}
  {% endfor %}

Any ideas how I could achieve this?

0 Likes
New Member
7 0 0

Do you mean visual swatch for filter values like this shop: https://usf-vertical.myshopify.com/collections/dresses (Neckline filter option)?

0 Likes
New Member
5 0 0

Hi Nancy,

 

That would be ideal for my needs.

 

Regards,

Chris

0 Likes