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

Store Design
, ,
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