Changing the color

[ChoobShop]

Hey there,

I hope you are doing well. I have a quick question about changing the color of my product description tab.

I want the color of the “Size” and “Material” to be the same as the “Buy it now” button. I suppose I can edit it from the color scheme, but cant find which one I am using for these buttons.

Is it possible to make it?

Thanks in advance!

Cheers,
Choob Shop

[niraj_patel]

Hello @ChoobShop
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[ChoobShop]

Hey @niraj_patel ,

Thanks for reaching out!

My store URL is:
www.choobshopbg.com/en

the pass is: 112233

Cheers!

[niraj_patel]

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.product-form__input--pill input[type=radio]:checked+label { background-color: #420d09 !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Rahul_dhiman]

Hello @ChoobShop
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
add this code at the end of the file.

.product-form__input--pill input[type=radio]:checked+label {
background-color: #420d09 !important;
}

the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[ChoobShop]

Thank you!

[Sweans]

Hi @ChoobShop ,

I’d be happy to help you change the color of your “Size” and “Material” tabs to match the “Buy it now” button.
You can do this by adding some custom CSS to your theme. Here’s how:

Add Custom CSS:

1 Go to your Shopify Admin panel.
2 Navigate to Online Store → Themes.
3 Click on the Actions dropdown for your current theme and select Edit code.
4 In the left sidebar, locate and open the assets folder and click on the theme.scss.liquid or theme.css.liquid file (the name might vary depending on your theme).
5 Add the following CSS at the end of the file:

.product-form__input--pill input[type=radio]:checked + label {
background-color: #420d09;
} .product-form__input--pill input[type=radio] + label:hover {
background-color: black;

6. Save the Changes:

I’ve successfully edited the styles to match your requirements, including adding the hover effect for both, like your “Buy it now” button, as shown in the attached screenshot of the inspect element view. Please check the attachment to see the changes.

If you need more specific guidance, feel free to ask!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[niraj_patel]

Hello @ChoobShop

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.product-form__input--pill input[type=radio]:checked+label { background-color: transparent; color: #6e6e6e !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.