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?
Topic summary
A user seeks to customize the “Add to Cart” button on their Shopify store’s product pages using the Trade Theme, requesting specific colors: #123524 background, #FFFFFF text, and #123524 border.
Solutions Provided:
Multiple community members offered CSS code solutions with two main approaches:
-
theme.liquid method: Insert CSS before the
</body>tag in theme.liquid file, targeting.product-form__submitclass with comprehensive styling including hover and focus states. -
Custom CSS method (recommended by multiple responders): Add simpler CSS code through Shopify admin → Themes → Customize → Theme Settings → Custom CSS.
Implementation Issue:
The original poster reported the first solution didn’t work when implemented. A follow-up correction noted the initial code was missing <style> tags.
Current Status:
Multiple working solutions have been provided using the Custom CSS approach, which appears more straightforward. The discussion remains open pending confirmation from the original poster on whether any solution successfully resolved the issue.
1 Like
TRy this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “theme. Liquid” file. Find the 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!
@Made4uo-Ribe Am I pasting it wrong? Could not get it to change the ATC button color.
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.
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;
}
1 Like
Yeps, sorry I forgot to add the style tag.
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!