Display tags on product page with link to relevant collection page

[claire_borchard]

How would one display tags on a product page and have them link to a collection page? I'd also like for them to be displayed as buttons or labels, instead of line text with commas in between.

I am currently working on designing the Canopy theme. Here's a link to a product page: https://4w53kow7idbm91r6-67010658589.shopifypreview.com . Ideally these tags would replace the metafield "features".

An example of what I'm after:

[suyash1]

@claire_borchard on which page do you have these tags?

[claire_borchard]

These tags will be displayed on the product page.

[suyash1]

@claire_borchard can you please name a product? I checked few and could not find it

[claire_borchard]

Sorry about that! I just realized the link didn't actually specify a product page. Please look for Cupcakes White Cosmos.

[suyash1]

@claire_borchard - there will be an option to add tags to a product from product back end, have you tried that option?

[claire_borchard]

I know how to add tags to the items, but I don't know how to get them to display on the product page, or as buttons / labels. 

[suyash1]

@claire_borchard once you add tags then code needs to be edited to show these tags at the place you want, it will need code editing + css

[claire_borchard]

Right. Do you know how to do that? I've seen code for displaying tags on the product pages, but I haven't seen any coding for changing the text to a button style. 

Alternatively, I thought about just changing the metafield "features" to display as labels / buttons, but I haven't found code for that either. 

[suyash1]

@claire_borchard - if you can provide me the collab access? I can duplicate theme and try it, so any changes will not affect live theme and then we can make it live if everything works

[claire_borchard]

I don't see any solutions?