How can I change the colour of the add to cart buttons without changing the colour scheme?

[GGTreasureHunts]

Hi

How can I change the colour of the add to cart buttons without changing the colour scheme? I'm assuming this can be done in the code but can't find it anywhere online.

Thanks.

[PageFly-Victor]

Hi @GGTreasureHunts ,

Could you please share URL and your store password if it enabled? So that we can help you.
Thank you.

[GGTreasureHunts]

www.ggtreasurehunts.com

[PageFly-Victor]

Hi @GGTreasureHunts ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

button.product-form__submit.button.button--full-width.button--secondary {
    background: black !important;
    color: white !important;
}
button.product-form__submit.button.button--full-width.button--secondary:after {
   display: none;
}

Note: You can change color value to match your store

Hope my answer will help you.

Best regards,

Victor | PageFly

[GGTreasureHunts]

Victor thank you, I've been trying to get this information off shopify
support for days with no luck. That has worked perfectly cheers! I do have
one more question is it possible to have the button background colours
different for the product page as to the home page?

[PageFly-Victor]

Hi @GGTreasureHunts ,

The code in my previous answer can be left as is. It will change the button background color on the product page and you can change button background color only home page by below way:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

{% if template == "index" %}
  <style>
   button.product-form__submit.button.button--full-width.button--secondary {
    background: black !important;
    color: white !important;
}
button.product-form__submit.button.button--full-width.button--secondary:after {
   display: none;
}
  </style>
{% endif %}