Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Changing the color

Solved

Changing the color

ChoobShop
Tourist
30 0 2

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

Screenshot 2024-07-22 at 14.13.42.png

Accepted Solution (1)
niraj_patel
Shopify Partner
2378 514 507

This is an accepted solution.

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 </body> on theme.liquid
<style>
   .product-form__input--pill input[type=radio]:checked+label {
       background-color: #420d09 !important;
   }
</style>

techlyser_web_0-1721578573764.png

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 7 (7)

niraj_patel
Shopify Partner
2378 514 507

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.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
ChoobShop
Tourist
30 0 2

Hey @niraj_patel ,

 

Thanks for reaching out! 

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

the pass is: 112233

Cheers!

niraj_patel
Shopify Partner
2378 514 507

This is an accepted solution.

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 </body> on theme.liquid
<style>
   .product-form__input--pill input[type=radio]:checked+label {
       background-color: #420d09 !important;
   }
</style>

techlyser_web_0-1721578573764.png

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
ChoobShop
Tourist
30 0 2

Thank you! 

 

niraj_patel
Shopify Partner
2378 514 507

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 </body> on theme.liquid
<style>
  .product-form__input--pill input[type=radio]:checked+label {
       background-color: transparent;
       color: #6e6e6e !important;
   }
</style>

techlyser_web_0-1721924652585.png

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Rahul_dhiman
Shopify Partner
658 128 134

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
9.png

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

Sweans
Shopify Partner
428 88 126

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.

Sweans_0-1721706891506.png

 



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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com