Solved

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

Prasadk
Shopify Partner
10 0 5

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

Accepted Solution (1)
Mgroup
Shopify Partner
38 7 9

This is an 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.

Thanks,
Mgroup Development

View solution in original post

Replies 11 (11)

Mgroup
Shopify Partner
38 7 9

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.

Thanks,
Mgroup Development
Prasadk
Shopify Partner
10 0 5

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

Mgroup
Shopify Partner
38 7 9

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

Thanks,
Mgroup Development
Prasadk
Shopify Partner
10 0 5

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
Shopify Partner
38 7 9

This is an 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.

Thanks,
Mgroup Development
Prasadk
Shopify Partner
10 0 5

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

 

Deoxes
Navigator
361 2 85

@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
Shopify Partner
7 0 0

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
Tourist
7 0 1

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
Visitor
3 0 0

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. 

Oj0522_0-1705345111649.png

 

 

 

sandipsabhdiya
Shopify Partner
7 0 0

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.