How to change colour of 'add to cart' button?

Store Design
, , ,
1

I want to test different colours for my ‘add to cart’ button.

I have tried the solutions already offered on this topic and none have worked.

I’m using Dawn theme (most recent version).

Currently the button has a shadow on hover - i’d like to keep that. But i would like the button background colour to be red (#a1102a), and the ‘add to cart’ text to be white.

Vampire_1_0-1729166485145.png
Vampire_1_0-1729166485145.png489×246 7.5 KB

In the base.css folder, there are lots of ‘button’ sections, but none say ‘add to cart’. There are several ‘shopify challenge button’ but i tried changing the colour and nothing happened. Unchanged code below:

shopify-challenge__button,
.customer button {
display: inline-flex;
justify-content: center;
align-items: center;
border: 0;
padding: 0 3rem;
cursor: pointer;
font: inherit;
font-size: 1.5rem;
text-decoration: none;
color: rgb(var(–color-button-text));
transition: box-shadow var(–duration-short) ease;
-webkit-appearance: none;
appearance: none;
background-color: rgba(var(–color-button), var(–alpha-button-background));
}

There’s also ‘button selection’:

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
background-color: rgba(var(–color-button-text), 0.3);
}

What am I looking for to change the add to cart button?

Many thanks!

2

Hello @Vampire_1

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.product-form__submit {
background-color: #a1102a;
color: #ffffff;
border: none;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.product-form__submit:hover {
background-color: #891022;
color: #ffffff;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
3

Try this if this code not work then share your store URL and password if any please.
so i can check and provide you possible solution for your question.

Hello @Vampire_1

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 on theme.liquid

.product-form__buttons button{ background: #a1102a !important; color: #fff !important; }

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

4

Thank you! This worked :slightly_smiling_face:

Your help is much appreciated.

5

This didn’t work i’m afraid, but thank you for your suggestion. I have now fixed it with another user’s suggestion :slightly_smiling_face:

6

You’re very welcome! I’m delighted that the solution was helpful. Feel free to reach out if you need any further assistance in the future. If you found this information valuable, I’d be grateful if you could give it a thumbs-up.

7

Hi! Thank you for this! Can you make one code with the colour light blue or light green?