How can I change the color of the 'add to cart' button?

I am looking to change the color of the add to cart button on a clients website, but there are no options in settings to change that button. see attached image for reference, the button i want to change the color of is outlined in pink.

Here is the link to the product: https://sweetskendamas.com/collections/all/products/triple-stripe-black-legend-shape

Can anyone take a look at the css and show me where to make this change? i want the button to be pink.

Thanks

MM

1 Like

Hi @mattpermute , go to theme.css and add the following code :

button.btn.btn--full.add-to-cart.btn--secondary {
    background-color: #FFC0CB !important;
}
1 Like

Hi @Abdosamer

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

button.btn.btn–full.add-to-cart.btn–secondary {

background: red !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like

Hello @mattpermute :waving_hand:

In Shopify Admin, you can go to Edit theme code, open file theme.css and add this code at the bottom

button.add-to-cart {
    background-color: #ff00c9 !important;
}

The result

Hope that helps!

1 Like

Hello!

Will this work for the Origin theme as well? Or would it be somewhere else

Hello,

where at the bottom exactly? I tried in two different spots and nothing changed for me, I am using the dawn theme version 14.0

Thanks!

Hello,

where at the bottom exactly? I tried in two different spots and nothing changed for me, I am using the dawn theme version 14.0

Thanks!

@B_Different_Clo , Add this code here :


How do I change the color if I’ve changed the name of the add to cart to buy it now and it goes directly to checkout (it works like buy it now)

Hello @mattpermute ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
button.btn.btn--full.add-to-cart.btn--secondary {
    background: #ec008c !important;
}

Let me know if you need further assistance!