Change add to cart button color and checkout button color at cart screen

Store Design
, , , ,
1

I want to change the change add to cart button color on my product page and the checkout button color on my cart screen so it stands out more. I am on Dawn 3.0.0.

2

Hi @brendanwalsh ,

You can change the color of Add to Cart and Checkout buttons using Custom CSS.
Custom CSS will be added to your entire theme that affects all pages in your online store except the Checkout page.

Use the following steps to add this custom CSS.

Steps:1. In your Shopify admin, go to Online Store > Themes.

  1. Click Customize.
  2. Click Theme settings.
  3. Click Custom CSS.
  4. Add the following code to the Custom CSS box.

You can replace the color #e28743 with your required one.

.cart__checkout-button {
background-color: #e28743;
}

.product-form__submit {
background-color: #e28743;
}
  1. Click Save.

Arslan_0-1683231223510.png
Arslan_0-1683231223510.png357×817 22.5 KB

After adding this CSS code the color for Add to Cart and Checkout buttons will be changed. I have provided you with the instruction according to Dawn 3.0.

If you provide your store URL then it will be great, so I can give you more personalized instructions as the CSS selector may be different for your theme.

Feel free to ask if you have any questions.

3

Hi Arslan,

I appreciate your help, I tried doing what you said but it doesn’t seem to be working. Here is my store URL: brendanwalsh401.myshopify.com

4

Hello @brendanwalsh

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

button.product-form__submit.button.button--full-width.button--secondary {
    color: #000000! important;
    border: 1px solid #000;
    background: #e2ae43 !important;
}
button.button.button--primary.button--full-width {
    color: #000000! important;
    border: 1px solid #000;
    background: #e2ae43 !important;
}
1 Like