All things Shopify and commerce
Hi i'm using the Vision Theme store URL https://bubbloot.net/
The issue is when I go to Theme setting - colour and try to change the button colours. I'm having issues with changing them separately seems they are linked. For example, at the moment they have a white background and black font. If i change the background from white to black for one of the buttons, it effects the font colour of the other which changes colour to black and now can't be seen. I don't know what the issue is, would be grateful for some help.
Solved! Go to the solution
This is an accepted solution.
color: white !important;
Hey @saidabs23
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 </body> tag
<style>
button#AddToCart {
background: black !important;
color: white !important;
}
.shopify-payment-button__button:not(.shopify-payment-button__button--branded) {
background: black !important;
color: white !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi,
I have done that now but both buttons are black, how can I make them separate colours, ie one white one black.
Hi @saidabs23
You can try this one.
button#AddToCart {
background: black !important;
color: white !important;
}
button.shopify-payment-button__button.shopify-payment-button__button--unbranded.BUz42FHpSPncCPJ4Pr_f.jjzYeefyWpPZLH9pIgyw.RWJ0IfBjxIhflh4AIrUw {
background: red !important;
color: white !important;
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
I don't have any of these in assets - base.css, style.css or theme.css.
This is an accepted solution.
color: white !important;
Hi just realized although that worked, the code is showing at the bottom of the page. How do i fix that?
to fix this you need to enclose the code inside style tag
<style>
color: white !important;
</style>
Done that but i'm getting this error
You can paste it on the product.css.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025