Text not appearing on Variant Picker and Cart

Technical Q&A

Topic summary

Out-of-stock variant buttons render fully black when selected, hiding the label text unless hovering (mustard hover state reveals the text). The issue occurs on a new site’s variant picker (product option selector), with examples shown for “10x8” and a black button under “Botanical Borders.” A screenshot is provided and is central to illustrating the visibility problem.

Requested help: a way to change the text color inside variant buttons specifically when the variant is out of stock (likely via theme/CSS adjustments).

Current status: no solutions or actions yet; the question remains open and unresolved.

Summarized with AI on December 10. AI used: gpt-5.
1

Hi there!

I am having trouble with the Variant Picker on my new site.

For variants that are out of stock, the button of the variant appears as fully black when the variant is selected. If I hover over the variant button, the highlight colour (mustard) appears and I then can see the text. For example, on this screenshot I am hovering over the “10x8” variant. Underneath, you can see an example of the black variant button under “Botanical Borders” - to the right of the “Yes” button:

  1. Screenshot 2025-12-10 at 22.06.09
    Screenshot 2025-12-10 at 22.06.091014×1108 56.9 KB

Is there a way to change the colour of the text inside the button of variants that are out of stock?

I have tried everything and it is driving me crazy - hope you can help!

Thanks,

Fernando

2

Additionally, in the Side-Cart, I cannot see the headers for the “Notes to seller” and “Discount” sections, just a + symbol to expand them open. How can I change the text to white so that the customers can read it?

Screenshot 2025-12-10 at 22.05.21
Screenshot 2025-12-10 at 22.05.21806×1488 66.7 KB

Thanks,

Fernando

3

Please check settings of Colors in your theme settings, you set text color is black so it cannot visible.

1 Like
5

@FGVPhoto can you please share your website link?

6

Unfortunately, my theme (Horizon) doesn’t seem to offer the option to modify the colour of this specific texts - or at least, I cannot find it.

The site is https://fernandogv.com/ - pw to access it is: test

Thanks!

1 Like
7

Hey @FGVPhoto

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.variant-option__button-label:has([data-option-available=false]):has(:checked) {
    background: #B68927 !important;
    color: white !important;
}
</style>

RESULT:

image
image639×544 17.9 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
8

Hey Moeed!

That totally worked, I am so grateful to you, I had spent such a long time trying to work it out!!

Do you happen to also know how to fix the issue with the side-cart not showing the headers for the “Notes to seller” and “Discount” sections? I can only see the + buttons! (and also, the + buttons are misaligned between them!)

Thanks!

Fernando

Screenshot 2025-12-10 at 22.05.21
Screenshot 2025-12-10 at 22.05.21806×1488 66.7 KB

9

This one is a pretty weird issue, I need to have a look at the backend for that. Can you share your collaborator request code with me in my private messages so that I can have a look?

Best,
Moeed

10

@FGVPhoto I think your issues are solved, are you facing any other issue?

11

In the end, I decided to remove the Discounts and Notes to Seller section from the side-cart. Quicker solution that way!

All good now, thanks everybody!

1 Like