Text of button atc into black

How can I turn the colour of the text of the shopping basket addition from white to black?

2 Likes

Hello @lf_2
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

please send my the code here

1 Like

Please share the link to your website, so I can check and provide you the code.

tilma.it

1 Like
.product-form__submit {
    color: black !important;
}

can you add this code to last line file base.css @lf_2

  • Please press ā€˜Like’ and mark it as ā€˜Solution’ if you find it helpful. Thank you.

Hi @lf_2

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.product-form__submit, .zrx-sticky-atc-main-button {
    color: black !important;
}

And Save.

Result:

Made4uoRibe_1-1724086018148.png

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

i need also the background color of the buttons in this color #9ff7bd, i try to do this but i see a border…can you help me?

Hi @lf_2

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the


Hope this can help you solve the issue

Best regards,

Richard | PageFly

Yes, we can do thaT. Check this one then.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.product-form__submit, .zrx-sticky-atc-main-button {
    color: black !important;
    background: #9ff7bd;
}
.product-form__buttons .button:before, .product-form__buttons .button:after {
    box-shadow: none;
}

And save.

result:

Made4uoRibe_1-1724323850478.png

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Hi @lf_2

I’ve read through your question carefully and understand that you want to change the color of the ā€œAdd to Cartā€ (ATC) button text from white to black. This is a simple CSS adjustment that you can make directly in your Shopify theme.

Solution:

You need to update your theme’s CSS file to change the button text color. Here’s how you can do it:

  1. Go to Your Shopify Admin
  2. Navigate to Online Store > Themes
  3. Click Customize on your active theme
  4. On the left panel, select Theme Settings > Custom CSS (if available). Otherwise, go to Actions > Edit Code
  5. In the Assets folder, find the file named base.css, theme.css, or style.css (the name may vary depending on your theme)
  6. Add the following CSS code at the bottom of the file:

button.add-to-cart,

.product-form__submit {

color: black !important;

}

Explanation:- The color: black !important; forces the text color to change to black, even if other theme styles are overriding it.

  • .add-to-cart and .product-form__submit are common class names used for the Add to Cart button. If your theme uses a different class, you may need to inspect the button using Chrome DevTools (right-click > Inspect) and adjust accordingly.

After adding the code, save the file and refresh your store to see the changes.

If the text color doesn’t update, clear your cache or try adding:

button.add-to-cart,

.product-form__submit {

color: black !important;

text-shadow: none;

}

If you’re using a custom theme or a third-party app, the class names may be different, so feel free to share your store URL or theme name for a more tailored solution.

If you need any other assistance, feel free to ask, and I will try my best to support you.
Best regards,
Daisy.