How can I change the button colour in the Dawn theme?

Store Design
1

Hi there, I would like to change the colour of the below buttons on my site to be the brand blue instead of black (same blue as in announcement bar)

  1. colour fill of sizes on Product detail page (change from black to blue)

  2. on hover and click of add to cart button id like it to be the brand blue

  3. minibag checkout button, send button on contact page and checkout button on cart, id like to change from black to blue

Thanks in advance

https://boogie-beans.myshopify.com/

password is yuteld

2

Hey @annabelleg21 ,

Please consider adding the following CSS to update the styling of a mentioned button in your Shopify store.

1: For color fill of sizes on product detail page, add below CSS in section-main-product.css file:

.product-form__input input[type=radio]:checked+label{
background-color: var(--gradient-base-accent-2);
border-color: var(--gradient-base-accent-2);
}

2: For color of add to cart button (on hover and click), add following CSS in section-main-product.css file

.product-form__submit:hover{
	background-color: var(--gradient-base-accent-2);
    --color-button-text: var(--gradient-base-accent-2);
}
.product-form__submit:focus-visible{
	outline: 0;
    box-shadow: none;
}

3: For minibag checkout button, add following css in base.css file

#cart-notification-form .button[name="checkout"]{
	background-color: var(--gradient-base-accent-2);
    --border-offset: var(--gradient-base-accent-2);
}

4: For send button on contact page, add following css in component-cart.css file

.contact__button .button{
	background-color: var(--gradient-base-accent-2);
    --border-offset: var(--gradient-base-accent-2);	
}

5: For checkout button on cart page, add following css in base.css file

.contact__button .button{
	background-color: var(--gradient-base-accent-2);
    --border-offset: var(--gradient-base-accent-2);	
}

Happy coding!

3

Hi there, thanks for your help. all of them worked except point 5. any ideas why point 5 isn’t working for the main checkout button?

4

Hi @annabelleg21

Yes, please apply following CSS for checkout button on cart page in base.css file

.cart__ctas button{
    background-color: var(--gradient-base-accent-2);
    --border-offset: var(--gradient-base-accent-2);	
}

I hope it will works for you. Please don’t forgot to Accept the solution and Like the comment.

Cheers!

5

it worked. thanks so much!

6

HI there, can you also confirm pls how do i change this button to blue? (continue shopping button when i empty the cart)

7

Hi @annabelleg21 ,

For change continue shopping button you need to add following CSS to this file: SALES CHANNELS > Online Store > Themes > Actions > Edit code > Assets > base.css

.cart__warnings a{
  background: var(--gradient-base-accent-2);
  --border-offset: var(--gradient-base-accent-2);
}

image-20220530-045034.png
image-20220530-045034.png828×397 8.8 KB

Thank you.

8

I need this one too but with different colors, what do I do?

9

Hello, I am also using the Dawn theme and would like to change the add to cart button to blue instead of black. under Edit Code, I don’t see an option for section-main-product.css

I do have something under Section which is labeled main-product.liquid. I tried adding the above code here, but it didn’t work to change the button color, it just showed the code text appearing on my website under the add to cart button when I tried that.