How to Display Tags on the Product Page in Dawn Theme?

[Prasadk]

How to Display Tags on the Product Page in Dawn Theme?

[Mgroup]

Hello,

Edit your code-> open file "main-product"

You can display tags by adding code bellow:

<div>

   {% for tag in product.tags %}
   <span>{{ tag }}</span>
   {% endfor %}

</div>

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

[Prasadk]

Thanks, can you please let me know where exactly should the code be added in the main-product.liquid?

[Mgroup]

Yes, of course, but first, tell me where directly you want to display them? Maybe some screenshot.

And ,please, can you share your website link?

Thanks in advance

[Prasadk]

here is the https://kalhaar.com/products/red-handwoven-modal-tye-and-dye-fabric

just below the product - Add to Cart, I want the Tags to be Displayed and linked to the products with the same tags.

thanks 

[Mgroup · Accepted solution]

Bellow updated code:

 <div class="product_tags" style="display: flex;flex-wrap: wrap;">
          {% for tag in product.tags  %}
          <form action="/search" method="get" role="search"" style="width: fit-content;margin-right: 10px;">
            <input type="text"
              placeholder="Search"
              value="{{ tag }}"
              style="display:none;width: fit-content;"
              type="search"
              name="q"
              role="combobox" 
              aria-expanded="false" 
              aria-owns="predictive-search-results-list"
              aria-controls="predictive-search-results-list" 
              aria-haspopup="listbox" 
              aria-autocomplete="list" 
              autocorrect="off" 
              autocomplete="off" 
              autocapitalize="off" 
              spellcheck="false" 
              aria-activedescendant=""
           >
              <button type="submit" value="{{ tag }}"
               style="border: none; background: transparent;cursor: pointer;"
              >{{ tag}}</button>
           </form>
           {% endfor %}
     	</div>

 Find in the file "main-product" line with  <div class="product__description"> and insert code before it. By clicking on each tag will be a search result by tag.

Unfortunately I have no access to your code to check, but it should work. If something go wrong, please, inform me.

[Prasadk]

Thanks So Much for your help. This works and is an amazing feature for our store.

[Deoxes]

@Mgroup Hi, can you tell me how I can add to my theme product image tags?

These codes I can use also?

Because how I understand the Dawn theme is with lazy load, just need to change product image tags, is that correct?

My store: homeda.co.uk

psw: picture

Theme: Dawn

Thanks

[sandipsabhdiya]

Hi, When I search with Arabic word in my Arabic content then-No results found is displayed. Can you please tell me how to fix the search issue with Arebic Word?

I'm using the Dawn Shopify theme.

[GoodVegans]

Is there a way to change the font to match Dawn theme? Also, to move the tags a bit left so they align with the rest of the copy? My shop is goodvegans.com Thank you.

[Oj0522]

Hi, I want to display a green A and A+ tags/labels on my product pictures, preferbly in the top right corner, or could be right next to the pictures too. Such as on the screenshot. Would this code work for that? Could you help me edit it according to my needs? I use Dawn theme. I would appreciate your reply. 

[MCOFA]

Great solution for displaying tags. I used on the Product Page template in a Custom Liquid section. 2 Questions:

1. Text is small. How to increase text size?

2. This displays far left with no margin or padding. I have it under the product description, and it is var left. How to add padding, or margin, or center-justify?  Thanks much in advance. 

[sandipsabhdiya]

Hi, When I search with Arabic word in my Arabic content then-No results found is displayed. Can you please tell me how to fix the search issue with Arabic Word?

I'm using the Dawn Shopify theme.