Change Add To Cart button colour - Craft 5.0

Solved

Change Add To Cart button colour - Craft 5.0

ralphs_orchard
Excursionist
24 0 2

Hi there,

 

I'd like to change the background colour of my Add To Cart button. Right now it just blends in because it's the same colour as the page background. I've managed to change the border and text in the Theme editor to make is slightly more visible, but would like to change the background colour of only the button itself.

 

Without adding and app or editing/adding code if possible 🙂

 

I'm using the free Shopify theme Craft 5.0

 

Thank you!

Accepted Solution (1)

eFoli-Marvic
Shopify Partner
223 40 39

This is an accepted solution.

@ralphs_orchard 

 add this code to your base.css file.

Navigate to online store >> Click edit theme code.

Now find base.css and paste the following code:

.product-form__buttons .product-form__submit{

    background: #e8d4d4 !important;
    color: #000 !Important;

}
Marvic | EFOLI
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants

View solution in original post

Replies 11 (11)

PageFly-Richard
Shopify Partner
4439 1016 1669

Hi @ralphs_orchard 

 

Can you share with me the page url...

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.

ralphs_orchard
Excursionist
24 0 2

thanks, it's www.ralphsorchard.com

GabrielS
Shopify Partner
483 106 114

Hello,

 

The theme might not provide a way to adjust the button background. To change the button's background, you can target it through CSS, similar to the below snippet:

button.product-form__submit {
background: red;
}
Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.

eFoli-Marvic
Shopify Partner
223 40 39

This is an accepted solution.

@ralphs_orchard 

 add this code to your base.css file.

Navigate to online store >> Click edit theme code.

Now find base.css and paste the following code:

.product-form__buttons .product-form__submit{

    background: #e8d4d4 !important;
    color: #000 !Important;

}
Marvic | EFOLI
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants
ralphs_orchard
Excursionist
24 0 2

This worked, thank you!

ralphs_orchard
Excursionist
24 0 2

yes this worked! thanks so much! is there a similar code which could be used for products/collections on the home page? right now the "Choose Options" and "Add to Cart" under products on the home page has the same old bland grey background.

ralphs_orchard
Excursionist
24 0 2

@eFoli-Marvic  yes this worked! thanks so much! is there a similar code which could be used for products/collections on the home page? right now the "Choose Options" and "Add to Cart" under products on the home page has the same old bland grey background.

AsimTalim
New Member
4 0 0

Hi there this is great! 


i've used this to successfully to change the colour of my Add to cart button on my product page using theme Craft 12.0.0.

 

however, the colour change is showing when i access my website/store on desktop but its not reflected when i access on mobile.

any ideas on how i can resolve this please? 

Many thanks! 🙂

ItsClutch
Visitor
1 0 0

My border color can't be changed.. Any tips on how to change that?

Screenshot 2024-03-11 at 12.20.12 AM.png

ralphs_orchard
Excursionist
24 0 2

You might be able to manage this by removing borders altogether? Try to to Online Store>Themes>Customize, then when you're in Theme Editor go to Theme Settings on the left and choose the "Buttons" dropdown, then set the "Border Thickness" and "Opacity" to 0.

 

buttons.png

PageFly-Richard
Shopify Partner
4439 1016 1669

Hi @ralphs_orchard 

 

I’m Richard Nguyen from PageFly- Free Landing Page Builder

 

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->base.css->paste bellow code in bottom of file

 

.quick-add__submit {

    background: #0df382 !important;

}

 

It will look like this: https://prnt.sc/mTlAnnJotGHJ\

 

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | 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.