Solved

Dawn theme: Change the color of the add to cart button

JHanson
Tourist
6 0 2

The add to cart button is default White with a black border and black text.

 

I would like to change it to BLACK with white text.

 

How can I do that in the code?

 

Thank you!

Accepted Solution (1)
Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @JHanson 


please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

.product-form__submit {
    background: #000000 !important;
    color: #ffffff !important;
}

 

View solution in original post

Replies 27 (27)

KetanKumar
Shopify Partner
36839 3635 11972

@JHanson 

Sorry you are facing this issue, it would be my pleasure to help you.

 

Welcome to the Shopify community!😊

Thanks for your good question.

 

Please share your site URL,

I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JHanson
Tourist
6 0 2

Site url:

 

dmwwebartisan
Shopify Partner
12282 2546 3694

@JHanson 

please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

.product-form__submit {
    background: #000000 !important;
    color: #ffffff !important;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
yass9898
Tourist
4 0 1

hi friend, do you know how to change cart icon style on dawn theme? Thank you

KetanKumar
Shopify Partner
36839 3635 11972

@yass9898 

yes please share the store url and what do you need?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
yass9898
Tourist
4 0 1

hi dear, I currently have no active stores, but I wanted to know if you knew how to change the style of the icon of the new shopify dawn theme , I do not like the icon of the cart that is there now and I would like to replace it with another style, the classic one with the cart or other is fine too

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @JHanson 


please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

.product-form__submit {
    background: #000000 !important;
    color: #ffffff !important;
}

 

Rosierose
Excursionist
29 0 4

this is brilliant and worked so well. any chance you have similar advice for the Buy Now button?

KetanKumar
Shopify Partner
36839 3635 11972

@Rosierose 

can you please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
zamanhasanov96
Excursionist
94 1 8

65FF45B7-074B-492B-A795-9BEE9A440826.png

Thank You. It is work. But ı can not change border color  I use dawn thema. My add to cart button border color did not changed. How ı resolve this problem? It is be black how remove or change to white color?

KetanKumar
Shopify Partner
36839 3635 11972

@zamanhasanov96 

sorry where is your store url?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tom090897
Tourist
15 0 1

Hi, how do you change the border color of add to cart button? I have followed all the steps, and it works for me but only the border color doesn't change. Just like you.

KetanKumar
Shopify Partner
36839 3635 11972

@Tom090897 

can you please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Rocío
Visitor
1 0 0

I did it!! Thank you!!

arslantariq
Shopify Partner
1 0 0

Thank you very much

 

Bram2
Tourist
10 0 4

Hello!

 

This seems to work for me. Is there also a solution for the buy now button? 😀

dmwwebartisan
Shopify Partner
12282 2546 3694

@Bram2 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Bram2
Tourist
10 0 4

lazeacosmetics.com    🙂

dmwwebartisan
Shopify Partner
12282 2546 3694

@Bram2 

Please share the screenshot of what you want!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Bram2
Tourist
10 0 4

I got the Buy Now button to change color with the code mentioned here on the forum. But I can not change the border color on hover. This code will not work:

 

button.shopify-payment-button__button.shopify-payment-button__button--unbranded {
background: #ff6600 !important;

color: #ffffff !important;
}

 

button.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover {
border-color: #ff6600 !important;
}

JonathanDun
Excursionist
31 1 2

I used this code, and it turned the Buy Now button complete black. No text is showing. Even when I delete this code the button remains black. What's going on here?

Here's a link to one of my products: https://jonathandunsky.com/en-il/products/ten-years-gone

SwellNutrition
Tourist
9 0 7

HI this only works for desktop. How do I apply the same change to mobile

HollowBranch
Excursionist
24 1 6

This worked for me. Thank you.

Raima
Visitor
1 0 1

Change The Color Of The Add To Cart Button for Featured collection

 

This code works

 

Assets —> base.css

 

.button--secondary {

    background: #000000 !important;

    color: #FFFFFF !important;

    border-color: #FFFFFF;

}

Screenshot 2023-03-07 at 10.53.26 PM.png

 

This is my website: https://www.josydesigns.com/

CaldaSnake
Visitor
1 0 0

Hello!

 

Your store looks phenomenal!

 

I see you were able to change the OUTLINE color of the Add to Cart button and the "Choose options" button (below every product with variants in your homepage).

 

I can't find the solution for both anywhere. Would please share how you've done it?

 

Thanks!

Peyman_kh
Visitor
2 0 0

I want to just change the border colour. how is it possible?

dmwwebartisan
Shopify Partner
12282 2546 3694

@Peyman_kh 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app