I need help with color

Technical Q&A
1

I’ve added a variant picker on some products but the problem is that the button to select the variants have white text and white background. I have tried changing the colors on the scheme but nothing works. Please help me to resolve this. Thank you :slightly_smiling_face:

refer to pictures below:

help 1
help 11369×775 197 KB

help 2
help 21143×803 195 KB

2

Hey @12am

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Here’s a link to one of the product that have this issue: Noteworthy Notepad - Musyi – 12AM.Crafts

4

Hey @12am

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>
.select__select option {
    color: black !important;
}
</style>

RESULT:

image
image549×249 16.1 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

5

Hi @12am

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
.select__select option {
    color: black !important;
}
6

By default theme uses the same background color and text color for the button as for the rest of the section.

Now, your product info section uses Color scheme 5 and it’s set to have a white foreground (text) color.
But somehow, your background color is not set properly (frankly, have no idea how it happened)

  .color-scheme-5 {
    --color-background: ,,; /* <-- this is not right! */
    . . .
    --color-foreground: 255,255,255;

Either your theme code is modified, or, some Customizer glitch…

First, I’d try to go to Theme settings=> Colors and try to reset the “Background” color of the “Scheme 5”.

Also, you can add this code to the “Custom CSS” of the “Product info” section – this will make your button pills or select options have truly transparent background.

product-info {
  --color-background: 0, 0, 0 / 0;
}
8

Thank you! This is definitely a literal fix! :slight_smile:

9

Thank you for the solution! I have no coding background so this really helps

10

Hi Tim! Thanks so much for the great feedback. While others shared some helpful fixes, I think your insight really gets to the root of the problem.

I’m not experienced with coding, but the part you mentioned about the transparent background sounds exactly like what I need. Would you be able to show me where to paste the code you provided? I don’t want to accidentally break anything and make my store look worse than it already does haha.

11

Hi @12am

Okay, send me the Collaborate access/code, and I’ll check everything and update you.

Best regards,
Devcoder :laptop:

12

Hello @12am,

You can fix this with CSS coding.

Go to
Online Store → Themes → Edit code

Open base.css
Scroll to the very bottom and paste the following code:

.select__select option {
    color: black! important;
}
13

Hi @12am :raising_hands:

I’ve reviewed the screenshot you shared, and you can completely handle the variant selection using Easify Product Options without needing any CSS adjustments. Easify’s option types are simple to set up, highly flexible, and always display correctly — unaffected by your theme’s colors or styling.

Here’s an example I’ve created so you can see how it works:

  • This is the result:

image
image1920×970 126 KB

  • This is the app setting:

image
image2048×1073 177 KB

With Easify, you just need to add an option using the Dropdown type (or Button, Color Swatch, Image Swatch — whichever you prefer). Then create the two values that match your product, for example Second Chance and Fresh Press. When customers select a value, everything will display clearly and won’t be affected by your theme’s styling.

image
image2048×1070 243 KB

Creating the option is also very simple: for each value, you just need to enter the label and optionally add a description, an additional price, or an image. The entire display interface is handled by Easify, so you don’t have to worry about any CSS issues from the theme causing incorrect colors or missing text.

The app offers a smooth and user-friendly experience for all your customizable products. Plus, the Easify team is always available to lend a hand whenever you need it. :blush: