fbpx

How to Display Product Tags on Shopify

How to Display Product Tags on Shopify

Last Updated on April 6, 2021 by LAUNCHTIP

How to display product tags on Shopify

You might want to add product tags on your Shopify product description pages and link them to the connections, allowing the customers to go from one product to the relevant collection.

Is there a way to do this, or do you have to get an app for this? Let’s discuss the options in detail. 

Displaying product tags on Shopify

To display product tags on Shopify, you’ll have to edit the theme code. Follow the steps given below: 

  • In your Shopify admin, go to the Online Store
  • Then, click on Themes 
  • Before this, you should create a backup. Click on Actions and then go to Duplicate. A backup is always helpful to have in case you need to revert back 
  • Then, go to Actions and Edit Code 
  • On the left-hand pane, you’ll see the option for Sections or product-template.liquid 
  • Type the following code: 
<ul class="product-tags">

  {% for tag in product.tags %}

  <li><a href="/collections/all/{{ tag | handleize }}">{{ tag }}</a></li>

  {% endfor %}

</ul>

 

When using this code, you should know that it assumes your store has an All Collection. If you have another collection scheme, make the changes in the code accordingly. 

You can also use the following code to show product tags on your Shopify product description page. 

{% if product.tags.size > 0 %}

  <div class="product-single__tags">

    <p>

      Tags:

      {% for tag in product.tags %}

      {% assign tag_coll = '/collections/all/' | append: tag %}

        {{ tag | capitalize | link_to: tag_coll }}{% unless forloop.last %},{% endunless %}

      {% endfor %}

    </p>

  </div>

{% endif %}

 

Displaying tags on product pages help your customers know which category the products belong to. Additionally, it’s good for SEO, so you should know how to add product tags to the description page. 

Merchants hope that Shopify would have an easier way to do this, such as displaying tags while filling the product description while uploading products. 

 

Related Posts
Leave a Reply