Hello! 
I wanna change the color of these link:
I used a custom liquid with the dawn theme. here’s the liquid code :
Fragrance 1 | Fragrance 2 | Fragrance 3 | Fragrance 4
How can I change the blue color so it is now #3C3C3C
thank you
Topic summary
Goal: change blue link color in a Shopify Dawn theme (using Custom Liquid) to #3C3C3C.
Current status: Inline style suggestion (adding style=“color:#3C3C3C” to the tag) did not work. The href attribute appears misused (an id-like value instead of a proper URL), which may contribute to the issue.
Key guidance:
- Prefer defining styles in a CSS file over inline HTML. Inline styles reduce control and can be overridden or cause maintenance issues.
- Check theme/custom CSS for a rule targeting links (e.g., a { color: #0000ff !important; }). The !important flag will block overrides.
- Use browser DevTools to identify which CSS rule applies the blue color, then adjust or override it.
- If only these specific links should be gray, add a class to the anchors (e.g., class=“my_link”) and target it in CSS (e.g., .shopify-section a.my_link { color: #3C3C3C; }). Ensure href contains the actual URL.
Resources shared: Shopify docs on adding CSS and guides on using DevTools.
Outcome: No confirmed resolution; next actions are to correct href, locate/override the blue link rule, and move styling to CSS.
@Max123456 thanks for getting back to me. it doesn’t seem to work unfortunately. Even after I added the color code, it remains blue. Do you have any idea why? thank you
Firstly you’re using the ‘href’ attribute incorrectly. This should be the URL (web page) that you wish to link to. What you have looks to be the ‘id’ attribute. Correct this (whatever) and it might also help with your issue.
If it doesn’t and you can avoid coding then you should: https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css.
But if you can’t…
Search your custom CSS file (for styling) to see where the blue colour is being administered. This will be an ‘a’ tag of some description so will look something like this:
a {
color: #0000ff !important; // the '!important' part is saying don't let it be overridden
}
So it may well be there in there so you could change the colour there. This is assuming that you have a custom CSS file .. and you really should if you want an easier life (especially when it comes to updating your theme).
If you’ve still got issues then I would suggest using your browser’s ‘Dev Tools’ to identify the style that is administering the blue to your link. Here’s how to do that in Chrome: https://developer.chrome.com/docs/devtools/css/ (check online for other browsers). Then use the most suitable of these techniques: https://www.digismoothie.com/blog/custom-css.
If for some reason you are making an exception (you want the colour of this specific link different to your general rule for links) then you would need something like this in your custom CSS file:
.shopify-section a.my_link {
color: #3C3C3C;
}
And your liquid file should probably go something like this (exchanging ‘YOUR_LINK_#’ for your designated web page):
Fragrance 1
Fragrance 2
Fragrance 3
I would NOT, under any circumstances directly edit your style in the HTML as previously suggested. You have less control and will very likely cause you a headache in the future.
Firstly you’re using the ‘href’ attribute incorrectly. This should be the URL (web page) that you wish to link to. What you have looks to be the ‘id’ attribute. Correct this (whatever) and it might also help with your issue.
If it doesn’t and you can avoid coding then you should: https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css.
But if you can’t…
Search your custom CSS file (for styling) to see where the blue colour is being administered. This will be an ‘a’ tag of some description so will look something like this:
a {
color: #0000ff !important; // the '!important' part is saying don't let it be overridden
}
So it may well be there in there so you could change the colour there. This is assuming that you have a custom CSS file .. and you really should if you want an easier life (especially when it comes to updating your theme).
If you’ve still got issues then I would suggest using your browser’s ‘Dev Tools’ to identify the style that is administering the blue to your link. Here’s how to do that in Chrome: https://developer.chrome.com/docs/devtools/css/ (check online for other browsers). Then use the most suitable of these techniques: https://www.digismoothie.com/blog/custom-css.
If for some reason you are making an exception (you want the colour of this specific link different to your general rule for links) then you would need something like this in your custom CSS file:
.shopify-section a.my_link {
color: #3C3C3C;
}
And your liquid file should probably go something like this (exchanging ‘YOUR_LINK_#’ for your designated web page):
Fragrance 1
Fragrance 2
Fragrance 3
I would NOT, under any circumstances directly edit your style in the HTML as previously suggested. You have less control and will very likely cause you a headache in the future.