Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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;
}
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.
Site url:
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!
hi friend, do you know how to change cart icon style on dawn theme? Thank you
yes please share the store url and what do you need?
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
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;
}
this is brilliant and worked so well. any chance you have similar advice for the Buy Now button?
can you please share store url
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?
sorry where is your store url?
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.
can you please share store url
I did it!! Thank you!!
Thank you very much
Hello!
This seems to work for me. Is there also a solution for the buy now button? 😀
Please share your store URL!
Thanks!
lazeacosmetics.com 🙂
Please share the screenshot of what you want!
Thanks!
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;
}
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
HI this only works for desktop. How do I apply the same change to mobile
This worked for me. Thank you.
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;
}
This is my website: https://www.josydesigns.com/
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!
I want to just change the border colour. how is it possible?
Please share your store URL!
Thanks!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024