new color for type value and size value when selected.

Store Design
, ,

Topic summary

A store owner wants to change the background color to black and text color to white for selected product variant options (type and size values).

Initial Solutions Attempted:

  • First approach: Adding CSS code to theme.css file (didn’t work)
  • Second approach: Adding code before the </head> tag in theme.liquid file

Resolution:
The second approach initially worked only for variant type values, not size values. The final working solution required adding !important flags to the CSS:

.single-option-radio input[type=radio]:checked+label {
  background-color: #000 !important;
  color: #fff !important;
}

This code, placed in <style> tags within theme.liquid, successfully applies the styling to both variant types and sizes. The issue is now resolved.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hello,

How do I change the variant “type value” and variant “size value” in “background black color” and the “text white color” when selected?

Your help is appreciated.

Store: www.visualwallart.com

WhatsApp Image 2024-12-16 at 19.29.07_21684fa2.jpg
WhatsApp Image 2024-12-16 at 19.29.07_21684fa2.jpg1768×1209 91.8 KB

2

Hello @vwa-decor ,

Please share the store URl.

Regards
Guleria

3

Hi, @vwa-decor

Can you please share the store URL so that I can assist you?

4

www.visualwallart.com

5

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme.css file and paste the following code at the bottom:

.single-option-radio input[type=radio]:checked+label {
    background-color: #000;
    color: #fff;
}

Problem solved don’t forget to Like it and Mark it as Solution!
If you need help with customization/code part you can contact me for services

You can find the email in the signature below.

Regards
Guleria

6

Hello,

Thank for replying.

I did put the code at the bottom of theme.css, but it did not work.

7

www.visualwallart.com

Thanks

8

I don’t find the code I provided in theme.css

https://visualwallart.com/cdn/shop/t/7/assets/theme.css

Can you please confirm how you added it ?

9

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

10

Please double check I put ir back.

I removed it when it did not work.

11

Thank you for replying,

I just added it, but not working

12

I can help you with it directly. I need to check your code. So I need to access your store as a collaborator if possible. Can you please send me your collaborator code?

13

Yes now css is there and you are right it’s not working.

Can you please once try to add it in theme.liquid just before tag

like this
14

You are the ‘Man’ … It works fine.

Thanks

15

It works,

Thankyou very much

16

Great but you mark another topic as solution.

17

Actually it only work for the variant type value not the variant size value.

I tried the following and it works for both variants:

.single-option-radio input[type=radio]:checked+label { background-color: #000 !important; color: #fff !important; }
18

That was a mistake.

This is your code that worked for both variants:

.single-option-radio input[type=radio]:checked+label { background-color: #000 !important; color: #fff !important; }

You can check it out

19

Okay Great. I updated the code.