I wanna change color

Topic summary

A Shopify store owner seeks to customize button colors on their product pages: the “Add to Cart” button should be #9ACA3D, while the “Buy It Now” button needs a #9ACA3D background with #303030 text.

Initial Solutions Provided:

  • Multiple responders offered CSS code snippets to be added either to theme.liquid (above the </body> tag) or theme.css files
  • Code targets button classes like .button--outline and .shopify-payment-button__button

Follow-up Issue:
After implementing the initial fixes, the checkout button in the cart drawer remained unchanged. The user shared a screenshot showing the persistent styling issue.

Additional Fix:
A responder provided supplementary CSS targeting .button.button--outline specifically to address the checkout button color.

Status: The discussion appears ongoing, with iterative solutions being provided to address each button styling issue as it’s identified. Screenshots demonstrate both the problems and proposed results throughout the troubleshooting process.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.

1} i wanna change add to cart button to #9ACA3D
2} Have to fix buy it now button & its background colour should be #9ACA3D & Text #303030

URL: https://www.mostlymo.com/

1 Like

Hey @Emiway

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag


RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

After adding to cart the checkout button is still same, can you also fix this

Hello @Emiway
Go to online store ----> themes ----> actions ----> edit code ---->theme.css
add this code at the end of the file and save.

.button.button--lg.button--outline.button--secondary {
color: #9ACA3D;
}
button.shopify-payment-button__button.shopify-payment-button__button--unbranded {
line-height: 1.3 !important;
color: #303030 !important;
background-color: #9ACA3D !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

Hi @Emiway

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:

.button--outline {
    color: #9ACA3D !important;
}
button.shopify-payment-button__button.shopify-payment-button__button--unbranded {
    background: #9ACA3D !important;
    color: #303030 !important;
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

After adding to cart the checkout button is still same, can you also fix this

Hello @Emiway
Go to online store ----> themes ----> actions ----> edit code ---->theme.css
add this code at the end of the file and save.

.button.button--outline {
color: #9ACA3D !important;
}

result

Thanks