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

Dekanten
Pathfinder
147 1 49

 

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:

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

Replies 3 (3)

wo
Shopify Partner
76 20 17

Use metafields to add URLs to each tag.

Dekanten
Pathfinder
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

tim
Shopify Expert
3466 280 1286

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).

 

 

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 tairli@yahoo.com