Shopify themes, liquid, logos, and UX
Hi, I've tried to change the color of my add to cart button using solutions shared in other discussions but it never worked. I'm using a custom theme. Can someone take a look at my website and tell me what code I should use?
Solved! Go to the solution
This is an accepted solution.
Thanks for it
do you like this
can you please share product section code so i will update code
This is an accepted solution.
Thanks for clear this
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
button#AddToCart-product-template {
background: #0AA9BD;
color: #fff;
}
.shopify-payment-button__button {
background: transparent !important;
color: #0AA9BD !important;
border-color: #0AA9BD !important;
}
.shopify-payment-button__button:hover {
color: #fff !important;
}
This is an accepted solution.
yes, please
.product-form__cart-submit {
background: #0AA9BD !important;
color: #fff !important;
}
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
This is an accepted solution.
Thanks for it
do you like this
can you please share product section code so i will update code
Basically, I'd like you to swap the colors of the "Add to Cart" and the "Buy it now" button. Add to cart: #0AA9BD (button color) with white (text color). Buy it now: white (button color) with #0AA9BD (text color).
How do I access the product section code once I get to theme >> edit code?
Thanks for assisting me!
This is an accepted solution.
Thanks for clear this
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
button#AddToCart-product-template {
background: #0AA9BD;
color: #fff;
}
.shopify-payment-button__button {
background: transparent !important;
color: #0AA9BD !important;
border-color: #0AA9BD !important;
}
.shopify-payment-button__button:hover {
color: #fff !important;
}
Amazing! This worked perfectly. However, the featured product on the home page still has the transparent ATC button...how do I change that color to match the other ATC buttons?
This is an accepted solution.
yes, please
.product-form__cart-submit {
background: #0AA9BD !important;
color: #fff !important;
}
Amazing! This guy is an expert in shopify web development & coding. Appreciate your time 🙂
Thanks for your compliment and support.
hi, i'd like to know how can you help me change the background color of the add to cart button on the product page? It's only a pure line box now.
https://ohcharm.com/products/curtain-tiebacks
color code is: #000c69
Thank you
i can see this
Any change you could take a look at mine as well, I can't find a solution to change the button color?
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