Change Add To Cart button colour - Craft 5.0

[ralphs_orchard]

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!

[PageFly-Richard]

Hi @ralphs_orchard 

Can you share with me the page url...

[ralphs_orchard]

thanks, it's www.ralphsorchard.com

[GabrielS]

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;

}

[eFoli-Marvic · 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;

}

[ralphs_orchard]

This worked, thank you!

[ralphs_orchard]

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]

@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]

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! 🙂

[PageFly-Richard]

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