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

Store Design
, ,
1

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!

1 Like
2

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

3

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!

4

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

websensepro_0-1727098293752.png
websensepro_0-1727098293752.png1059Ă—456 141 KB

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

Thanks!

1 Like
5

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 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
Made4uoRibe_0-1727098245695.png447Ă—155 3.86 KB

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

1 Like
6

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 :slightly_smiling_face: Also, it’d be great if you can like and mark the solution as accepted.

Cheers!
Shubham | Untechnickle

1 Like
7

That works thanks!

8

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