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.

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