Grey fields around product tags with direct url links - Dawn theme

[Dekanten]

Hello

I want to change something in the product tags, i have made uppercase text and now i want to have grey fields on each tag. Also each link have a url to direct to each collections. Can that be possible? 🙂

Thanks for all your contributions for helping me out here. 🙂

My store url:

www.dekanten.no

See attached image:

[wo]

Use metafields to add URLs to each tag.

[Dekanten]

I havent done metafields before, do you have any ideas to create the first meta so i can try to to the rest, maximum tags on a product will be max 5 pcs.

This is a list of complete tags then. I want everyone of these added with an url who leads to these collections. Any guide you can help me with ? 🙂

Damer - Herre - Unisex - Nyhet - Designer - Nisje

[tim]

There is no direct link between tag and collection.

You could check whether there is a collection with the name/handle matching a tag and this could work, but your tag is "nyhet" while collection title/handle/url is "nyheter", so...

However, instead of listing tags you can list product collections:

{% if product.collections.size > 0 %}
  <div class="product-tags">
    {% for c in product.collections %}
      <a href="{{ c.url }}" class="tag">{{ c.title | upcase }}</a>
    {% endfor %}
  </div>
{% endif %}

<style>
  .product-tags .tag {
    display: inline-block;
    background: rgba(20,20,20,0.2);
    padding: 0.25rem 1rem;
    margin: 0.25rem 0;
    text-decoration: none;
  }
</style>

 (style should probably go to your stylesheet and not be a part of section code, but).