Hi, I have a collection list on my homepage with links to 4 product categories (see image). I’ve changed the button background colour to 100% transparent, and put the buttons on top of my collection images. This suits product categories 1 & 4 (rings & pendants) where the buttons are in front of lighter coloured images. However, in categories 2 & 3 (earrings & bangles) the buttons are in front of dark coloured images, so the text isn’t visible for people to click. Is there a way to change the button text colour to white for these two buttons only, without impacting the others? Any advice is appreciated! Thank you
Topic summary
Issue: Button text on two collection list items became unreadable after setting button backgrounds to transparent and overlaying them on dark images. The requester wanted those two buttons to use white text without changing the others.
Steps taken:
- Support asked for a preview/store URL to inspect the setup.
- The requester shared the preview link.
Solution:
- Instruction given to edit the theme code (Online store > Themes > Edit code), open theme.liquid, and add a custom CSS snippet under the to target only the affected collection items/buttons and set their text color to white. (Exact code content is not shown in the thread.)
Outcome:
- The requester confirmed the fix worked as intended.
- No further issues or follow-up actions were raised; the thread is resolved.
Notes:
- A screenshot was provided to illustrate the light vs dark background contrast affecting text visibility.
- No broader changes to layout or other sections were discussed.
HI @SWilliam
Please share your store URL to check
Hi @Dan-From-Ryviu here’s a link to my store URL: https://4d0heuq1w2fnijx8-66606432473.shopifypreview.com
Go to Online store > Themes > Edit code > open theme.liquid file, add this code below under element
1 Like
Thank you! This has worked perfectly.
1 Like
Glad I could help