How to change the color of add to cart button - Pipeline theme

Solved

How to change the color of add to cart button - Pipeline theme

awirtz
Explorer
54 0 11

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

 

Screenshot 2024-05-29 at 7.30.29 AM.png

Accepted Solution (1)
PageFly-Noah
Shopify Partner
1317 233 268

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.

View solution in original post

Replies 7 (7)

PageFly-Noah
Shopify Partner
1317 233 268

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.

awirtz
Explorer
54 0 11

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

 

PageFly-Noah
Shopify Partner
1317 233 268

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.

awirtz
Explorer
54 0 11

I would like to add a background color that is light grey or about 15% of the #567166 on the rollover.

Thanks.

PageFly-Noah
Shopify Partner
1317 233 268

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.

awirtz
Explorer
54 0 11

That works great! Thank you for the help, I appreciate it.

PageFly-Noah
Shopify Partner
1317 233 268

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.