Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
How can I change the color of the "add to cart" button from orange to #576166 throughout the entire site if possible?
Here is a link to my unpublished site: https://z2fbb5cc6x4vtsws-57200312371.shopifypreview.com
Solved! Go to the solution
This is an accepted solution.
Hi @awirtz Please add code here:
<style>
.btn--add-to-cart{
border: 1px solid #576166 !important;
color: #576166 !important;
}
.btn--add-to-cart:hover{
background: rgba(87, 97, 102, 0.15) !important;
}
</style>
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
This is Noah from PageFly - Shopify Page Builder App
Hi @awirtz Please add code here to fix it:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>
<style>
.btn--add-to-cart{
border: 1px solid #576166 !important;
color: #576166 !important;
}
</style>
Hope my solution will help you resolve the issue.
Best regards,
Noah | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Thank you Noah, that worked! Is there a way I can change the rollover color to be a 15% gradient of #576166? Right now it rolls over to a light orange color. Thanks!
https://z2fbb5cc6x4vtsws-57200312371.shopifypreview.com
You want to apply gradient to border or text color, or background Button?
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
I would like to add a background color that is light grey or about 15% of the #567166 on the rollover.
Thanks.
This is an accepted solution.
Hi @awirtz Please add code here:
<style>
.btn--add-to-cart{
border: 1px solid #576166 !important;
color: #576166 !important;
}
.btn--add-to-cart:hover{
background: rgba(87, 97, 102, 0.15) !important;
}
</style>
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
That works great! Thank you for the help, I appreciate it.
Thank you , Have a nice day 😉!
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025