Change Add to Cart Button Color in Trade Theme

[jordanbford1]

How to I change the Add to Cart button colors to be #123524 background color, #FFFFFF text color, #123524 boarder color for my Product Pages on Trade Theme?

[Made4uo-Ribe]

Hi @jordanbford1 

TRy this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

.product-form__submit {
    background: #123524;
    color: #fff;
    
}
.product-form__submit:after {
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(18, 53, 36, 1), 
                0 0 0 var(--buttons-border-width) rgba(18, 53, 36, 0.5); 
}

.product-form__submit:before {
    box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(18, 53, 36, 0.7); 
}

.product-form__submit:not([disabled]):hover::after {
    --border-offset: 1.3px;
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(18, 53, 36, 1), 
                0 0 0 calc(var(--buttons-border-width) + 1px) rgba(18, 53, 36, 0.5);
}

.product-form__submit:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.3rem rgba(18, 53, 36, 1), 
                0 0 0 0.5rem rgba(18, 53, 36, 0.5),
                0 0 0.5rem 0.4rem rgba(18, 53, 36, 0.3); 
}

• And Save. 
• Result:
  

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[jordanbford1]

@Made4uo-Ribe Am I pasting it wrong? Could not get it to change the ATC button color.

[Made4uo-Ribe]

Yeps, sorry I forgot to add the style tag.

<style>
.product-form__submit {
    background: #123524;
    color: #fff;
    
}
.product-form__submit:after {
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(18, 53, 36, 1), 
                0 0 0 var(--buttons-border-width) rgba(18, 53, 36, 0.5); 
}

.product-form__submit:before {
    box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(18, 53, 36, 0.7); 
}

.product-form__submit:not([disabled]):hover::after {
    --border-offset: 1.3px;
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(18, 53, 36, 1), 
                0 0 0 calc(var(--buttons-border-width) + 1px) rgba(18, 53, 36, 0.5);
}

.product-form__submit:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.3rem rgba(18, 53, 36, 1), 
                0 0 0 0.5rem rgba(18, 53, 36, 0.5),
                0 0 0.5rem 0.4rem rgba(18, 53, 36, 0.3); 
}
</style>

And Save.

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[DaisyVo]

Hi @jordanbford1 

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

.product-form__buttons button.product-form__submit {
    background: #123524 !important;
    color: #fff !important;
    border: solid 1px #123524 !important;
}
.product-form__buttons button.product-form__submit::after {
    display: none !important;
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[Dan-From-Ryviu · Accepted solution]

Hi @jordanbford1 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

.product .product-form__submit {
    background-color: #123524;
    color: #FFFFFF;
    border: 1px solid #123524;
}