How to change the checkout button color in Dawn theme?

Store Design
1

I want to change the colors of 2 of the buttons in my theme

I am using dawn theme version 10.0

My website is householdpoint.pk

below I have attached 2 screenshots so you can see waht exaxtly I want to do

I want the colour to be in black so it can match my theme

Thanks a lot in advance

1.jpg
1.jpg1329×601 78.6 KB

2.jpg
2.jpg702×1600 78 KB

1 Like
2

Hello There,

  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:
.cart-count-bubble {
background-color: #000!important;
}
button#checkout {
background-color: #000!important;
color: #fff!important;
}

ZestardTech_0-1688547939104.png
ZestardTech_0-1688547939104.png1298×919 118 KB

ZestardTech_1-1688547949100.png
ZestardTech_1-1688547949100.png1734×603 51.6 KB

3

Hello @kamm0

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.

svg.icon.icon-cart {
    color: #000 !improtant;
}
.cart-count-bubble {
    background: #000 !improtant;
}
button.button.button--primary.button--full-width {
    background: #000 !improtant;
}
4

Its not working bro, I want Black color with white text inside

5

Thanks dear, Ur code has solved one issue but still in checkout button is still grey ( I want black color button with white text inside, Can you please advise anything for that as well

for Your reference I am attaching another screenshot of my cart settings, its Cart type, Popup notification style

3.jpg
3.jpg352×728 27.7 KB

5a411705-491c-46fd-af52-b634accad4a9.jpg
5a411705-491c-46fd-af52-b634accad4a9.jpg720×1392 71.8 KB

6

Hello @kamm0

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.

svg.icon.icon-cart {
    color: #000 !important;
}
.cart-count-bubble {
    background: #000 !important;
}
button.button.button--primary.button--full-width {
    background: #000 !important;
}