Targeting Specific Product Tags

Highlighted
New Member
3 0 0
Hi,

Is it possible to target product tag links individually eg. by ID, so that I can colour code them?

Example. Tags are: Apples, Oranges, Bananas.
I would like the Apples tag to be Red, the Oranges tag to be Orange and Bananas to be Yellow.
0 Likes
Highlighted
Shopify Expert
1342 111 181

I can add that customization for you. Shoot me an email.
Thank you!

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
New Member
3 0 0
I appreciate that, but am looking to do the customisation myself. Coming over from Blueprint at BigCommerce, still learning Liquid. I’m looking for information on the targeting handler for tags for this kind of customisation. :)
0 Likes
Highlighted
New Member
3 0 0

I managed to solve it by adding id="{{ tag | handle }}" to any <li> or <span> outputting a product tag.

 

eg. product-template.liquid

 

 {% if product.tags.size > 0 %}
  <div class="product-single__tags">
    <p>
      {% for tag in product.tags %}
      {% assign tag_coll = '/collections/all/' | append: tag %}
      <span class="product-tags" id="{{ tag | handle }}">{{ tag | capitalize | link_to: tag_coll }}</span>{% unless forloop.last %}{% endunless %}
      {% endfor %}
    </p>
  </div>
{% endif %}

 

eg. collection.liquid

 

<ul class="subnav clearfix">
  <li{% unless current_tags %} class="active"{% endunless %}>
    {% if collection.handle %}
    <a href="/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %}">All</a>
    {% elsif collection.current_type %}
    <a href="{{ collection.current_type | url_for_type | sort_by: collection.sort_by }}">All</a>
    {% elsif collection.current_vendor %}
    <a href="{{ collection.current_vendor | url_for_vendor | sort_by: collection.sort_by }}">All</a>
    {% endif %}
  </li>
  {% for tag in collection.all_tags %}
  {% if current_tags contains tag %}
  <li class="active">
    {{ tag | link_to_remove_tag: tag }}
  </li>
  {% else %}
  <li id="{{ tag | handle }}">
    {{ tag | link_to_tag: tag }}
  </li>
  {% endif %}
  {% endfor %}
</ul>

 

Then just style as normal. eg. li#tagname a, span#tagname { ...style here ... }.

 

0 Likes