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

147 1 49




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:


See attached image:

Skjermbilde 2024-03-11 kl. 03.50.10(1).png

Replies 3 (3)

Shopify Partner
79 22 19

Use metafields to add URLs to each tag.

147 1 49

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

Shopify Expert
3480 281 1289

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 %}
{% endif %}

  .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 should probably go to your stylesheet and not be a part of section code, but).



If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail