How do I edit my product tags - change color and style etc? Would like tags to look like this - signature colour is 66AFAE. I’m on the Dawn 9 theme.
Right now they look like this:
Topic summary
A user seeks to customize product tags in the Dawn 9 theme to match their brand color (#66AFAE) and achieve a specific visual style shown in a reference image.
Current Issue:
- Tags display as plain text links
- User wants styled, colored tag blocks similar to their reference design
Solution Provided:
A community member offered CSS code to be added to the base.css file that:
- Applies the desired background color (#66AFAE)
- Adds padding and grid layout
- Styles tags as white text blocks
Remaining Problems:
- Only the text itself is clickable, not the entire tag block
- Tag blocks appear too large when containing longer text
- Font size adjustments may still be needed
Status: The discussion remains open as the initial solution improved the appearance but didn’t fully resolve clickability and sizing issues. Both participants are working toward refining the implementation.
1 Like
1 Like
Thank you for the information. Sorry but can you specify which page or area is this? Thanks!
Thank you for the information.
I design it. You can try it.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
- And Save.
.product-tags {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 2px;
}
.product-tags span {
background: #66AFAE;
padding: 2px;
text-align: center;
}
span.tag a {
text-decoration-line: none;
color: white;
}
Result:
I hope it help.
Hi - thanks a lot. It does look better - but maybe not quite right. Be great if the whole tag block was clickable - not just the word. When the block is enlarged by the number of words on the tag, the block is too big. But I’m not sure how to improve that. But again, thank you very much for your help.
1 Like
Yeah, I didnt touch the font size. But i put a padding so the words so wont be kissing on the side. If there is a will theres a way. We can find solution on that. 