Re: how to change background colour of variant pills and add to cart

Solved

how to change background colour of variant pills and add to cart

schikinoils
Excursionist
44 0 7

I would like to change the background colour of my variant pills and add to cart/choose options (both in the product cards and product pages) so that it matches the other buttons background (#7F5777).

My website is https://www.schikin.co.uk/

password is ohgleu

Many thanks!

 

Accepted Solution (1)
websensepro
Shopify Partner
1273 144 160

This is an accepted solution.

Hi @schikinoils ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

 

 

<style>
.quick-add__submit {
    background-color: #7F5777;
    color: white;
}

.product-form__buttons [name="add"] {
    background-color: #7F5777;
    color: white;
}

.product-form__input--pill input[type=radio]:checked+label {
    background-color: #7F5777 !important;
    color: white !important;
}
</style>

 

websensepro_0-1727098293752.png

 

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

View solution in original post

Replies 7 (7)

TheUntechnickle
Shopify Partner
34 5 7

Hey Schikinoils,

 

You can easily change the background color of your variant pills and add-to-cart button using a bit of custom CSS. Based on the button background color you want (#7F5777), here are two CSS snippets that should work for both your product cards and product pages:

 

 

.quick-add__submit {
    background-color: #7F5777;
    color: white;
}

.product-form__buttons [name="add"] {
    background-color: #7F5777;
    color: white;
}

 

 

Here’s how to do that:

 

  1. Go to your Shopify admin.
  2. Navigate to Online Store > Themes.
  3. Click on Actions > Edit code.
  4. Find the base.css file (typically under Assets).
  5. Paste the code at the bottom and save the changes.

The first snippet targets the "Quick Add" button (.quick-add__submit), and the second snippet applies to the "Add to Cart" button ([name="add"]). Just drop these into your theme's custom CSS file (base.css), and both should match the rest of your site's styling.

 

Let me know if you need further help!

 

Many thanks,
Shubham | Untechnickle

We’re here to simplify your Shopify experience!
Let’s chat over a virtual coffee and find the perfect solution for your store.



Our Services: Store Build & Redesign | Theme Customization | Website Audit & Optimization | Bug Fixes | App Setups

schikinoils
Excursionist
44 0 7

Hi many thanks for your quick reply.

It works perfectly for the Add to cart, many thanks!

Sadly it doesn't seem to work for the variant pills though. Any other ideas please? many thanks!

websensepro
Shopify Partner
1273 144 160

This is an accepted solution.

Hi @schikinoils ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

 

 

<style>
.quick-add__submit {
    background-color: #7F5777;
    color: white;
}

.product-form__buttons [name="add"] {
    background-color: #7F5777;
    color: white;
}

.product-form__input--pill input[type=radio]:checked+label {
    background-color: #7F5777 !important;
    color: white !important;
}
</style>

 

websensepro_0-1727098293752.png

 

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial
schikinoils
Excursionist
44 0 7

That works thanks!

ComfyPOS
Visitor
1 0 0

Hello how can I change the color of the variant pills to red background white text, only for the variants that are on sale?

TheUntechnickle
Shopify Partner
34 5 7

My bad! @schikinoils : Please accept my apologies. And, please use this code and paste this in your (base.css). That's the only code you need to add.

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



Feel free to reach out in case you've any more questions 🙂 Also, it'd be great if you can like and mark the solution as accepted.

Cheers!
Shubham | Untechnickle

We’re here to simplify your Shopify experience!
Let’s chat over a virtual coffee and find the perfect solution for your store.



Our Services: Store Build & Redesign | Theme Customization | Website Audit & Optimization | Bug Fixes | App Setups

Made4uo-Ribe
Shopify Partner
8775 2098 2573

Hi @schikinoils 

Check this one .

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

.product-form__input--pill input[type=radio]:checked+label {
    background: #7F5777;
    color: rgb(var(--color-background));
}

 

And save. 

result:

Made4uoRibe_0-1727098245695.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.