Label link not working

[PK2023]

Hi,

In my "product-item" snippet I tried to create a image label with a link that leads to a collection. However the link is not working and clicking it only opens the product page.

The odd thing is that I have previously created almost identical label to the same snippet and it works like a charm. The only difference between these two is that the working one loops through collection and the broken one loops through tags. The image is however showing in the broken one so the looping works like it should. Would someone help me to figure out why the broken link is not linking?

Broken code:

{%- for tag in product.tags -%}
{%- if tag contains 'book' -%}
<a href="/collections/tulips" style="position:relative; z-index:1;"><img src="https://cdn.shopify.com/s/files/1/0651/0890/2100/files/book_icon_e827c9f4-1c6b-43d1-8c1d-9102a88ee47..." width="20px;"height="20px;" style="margin:0;"></a>
{%- endif -%}
{%- endfor -%}

Working code: 

{% for collection in product.collections %}
{% if collection.title contains "The bulbs of the future" %}
<a style="margin-bottom: 45px !important;" class=" product-item__quick-buy-button hidden-lap-and-up" href="/collections/nlg" ><img src="https://cdn.shopify.com/s/files/1/0587/8307/2392/files/IMG_1074.jpg?v=1721909176" style="width:25px;"></a>
<a class="product-item__quick-buy-button hidden-tablet hidden-phone" href="/collections/nlg" ><img src="https://cdn.shopify.com/s/files/1/0587/8307/2392/files/IMG_1074.jpg?v=1721909176" style="width:25px;"></a>

{% endif %}
{% endfor %}

Thanks!

[AnneLuo]

Hi, @PK2023 

Can you please share the store URL so that I can assist you?

[PK2023]

Hi,

It is only in a test theme so sharing link doesn't work 🙂 

I am just wondering if there is something very obvious I am doing wrong.

[Huptech-Web]

Good day, @PK2023. Could you kindly provide me with the link to your store?

[PK2023]

Hi,

It is only in a test theme so sharing link doesn't work 🙂 

I am just wondering if there is something very obvious I am doing wrong.

[PK2023 · Accepted solution]

Figured out this myself no need for help anymore 🙂

[oscprofessional]

Hey @PK2023 

The issue you're experiencing might be due to how the link or the tag is being processed in the product-item snippet. Here are a few things to check and try:

1. Check Z-Index and Overlapping Elements

2. Ensure Tag Logic is Correct

You can test this by adding a simple text link inside the loop to see if it's clickable:

{%- for tag in product.tags -%}
  {%- if tag contains 'book' -%}
    <a href="/collections/tulips">Tulips Collection</a>
  {%- endif -%}
{%- endfor -%}

If the text link works, the issue might be related to the image or its styling.

3. Try a Different Approach

{%- for tag in product.tags -%}
  {%- if tag contains 'book' -%}
    <div style="position: relative;">
      <a href="/collections/tulips">
        <img src="https://cdn.shopify.com/s/files/1/0651/0890/2100/files/book_icon_e827c9f4-1c6b-43d1-8c1d-9102a88ee47..." width="20px" height="20px" style="position: relative; z-index: 1;">
      </a>
    </div>
  {%- endif -%}
{%- endfor -%}