Solved

How can I change the text color to white on my website's buttons only?

Vince111
Explorer
51 3 2

How can I change te color of text to 'buttons only' not the overall but buttons only

 

i want them to be in white because the color of my buttons are black and the main color of text of my website is black as well. So i want the text in the buttons to be white, ONLY BUTTONS.

 

store url. maevincollection.com

Accepted Solutions (2)
ThePrimeWeb
Shopify Partner
2138 614 490

This is an accepted solution.

Just add this code also, same instructions. Don't remove the previous one. Add this one below <head>

 

 

<style>
.product-form .product-form__submit span {
    color: #fff !important;
}
</style>

 

 

 

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Vince111
Explorer
51 3 2

This is an accepted solution.

@ThePrimeWeb Thank you so much! It worked!

View solution in original post

Replies 6 (6)

ThePrimeWeb
Shopify Partner
2138 614 490

Hey @Vince111,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
a.button.button--primary {
    color: #fff !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1714221700423.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Vince111
Explorer
51 3 2

@ThePrimeWeb hi, thanks. It worked on my banner page button but on the  product page where it says 'buy it now' it's still all black 😞

 

store url: maevincollection

Vince111_0-1714222330121.jpeg

 

ThePrimeWeb
Shopify Partner
2138 614 490

This is an accepted solution.

Just add this code also, same instructions. Don't remove the previous one. Add this one below <head>

 

 

<style>
.product-form .product-form__submit span {
    color: #fff !important;
}
</style>

 

 

 

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Vince111
Explorer
51 3 2

This is an accepted solution.

@ThePrimeWeb Thank you so much! It worked!

Vince111
Explorer
51 3 2

@ThePrimeWeb hi, I just realized today that the text on others buttons are invisible too. See screenshot below.

Could you please help me make 'all buttons' have visible text.

 

Vince111_0-1714689799396.jpeg

Vince111_1-1714689811685.jpeg

 

ThePrimeWeb
Shopify Partner
2138 614 490

There's not really an "all-in-one" solution, if you go through other parts of the site and find this issue again, just tell me where to find it (What page, etc..)

 

To fix the issues you have shown, add this code

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.button.button--primary.button--full-width, 
.badge {
  color: white !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1714699864275.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!