Clickable Tags On The Product Page In Dawn Theme?

[euphoriaforest]

So I've found 2 solutions but want to combine them.

Can anyone help?

Essentially I want tags to be displayed under the title but I want them to take me to the corresponding collection when clicked.  I also want them to appear as pill buttons like everything else on my product page.

Formula that adds clickable tags: https://community.shopify.com/c/shopify-design/how-to-display-tags-on-the-product-page-in-dawn-theme...

Formula that styles them: https://community.shopify.com/c/shopify-design/display-product-tags-on-product-page-dawn-7-0-1/m-p/2...

[Sweet_Savior_3]

Hello @euphoriaforest 

Welcome to Shopify Community,

Please tell me what help you need with the provided solutions ?

Thanks

[ThePrimeWeb]

Try this @euphoriaforest 

 <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="background-color:white; padding: 5px 15px 5px 15px; border-radius: 15px; border: 1px solid grey; display: inline-block; margin-top: 4px;"
              >{{ tag}}</button>
           </form>
           {% endfor %}
     	</div>

[euphoriaforest]

This worked but is there any way to make them smaller and also change color when you hover over them so people will know they are clickable?

[ThePrimeWeb]

Well, I don't even know what it looks like because I just combined the code. Can I have the link to your store to see what it looks like to downsize it?

[euphoriaforest]

Oh my bad! It's: https://euphoriaforest.store/products/1team-real-fujifilm-instax-prints-kpop-korean-euphoria-forest

[ThePrimeWeb · Accepted solution]

You can replace the code with this.

 <div class="product_tags" style="display: flex;flex-wrap: wrap;">
<style>
.product_tags button:hover {
    background-color: rgb(202,144,198) !important;
    border: 1px solid rgb(202,144,198) !important;
}
</style>
          {% 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="background-color:white; padding: 0px; border-radius: 15px; border: 1px solid grey; display: inline-block; margin-top: 4px;cursor:pointer;"
              >{{ tag}}</button>
           </form>
           {% endfor %}
     	</div>

[euphoriaforest]

This worked! Thank you for your help

[MMO1]

@ThePrimeWeb Hi, is there a way to display the tags in alphabetical order?

[ThePrimeWeb]

I'm not sure if it'll work, but you can try this and see @MMO1 

 <div class="product_tags" style="display: flex;flex-wrap: wrap;">
<style>
.product_tags button:hover {
    background-color: rgb(202,144,198) !important;
    border: 1px solid rgb(202,144,198) !important;
}
</style>
          {% assign products_by_tags = product.tags | sort_natural %}
          {% for tag in products_by_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="background-color:white; padding: 0px; border-radius: 15px; border: 1px solid grey; display: inline-block; margin-top: 4px;cursor:pointer;"
              >{{ tag}}</button>
           </form>
           {% endfor %}
     	</div>