Shopify themes, liquid, logos, and UX
I need to change button colors from default to #ffc439 both on homepage sliders as well as product pages.
Theme editor only allows black and white button colors of the homepage sliders and the same color is applied to the text above and below.
Product page buttons have the overall theme's color. Split only allows Main and Highlights color in the Theme Editor.
For a paid theme this is quite limiting. Could anyone help? I can change the code based on instructions. Thanks
Solved! Go to the solution
This is an accepted solution.
I have added prev given code.
.shopify-section .site-box.box__slideshow-split .slideshow-item .site-box .button {background: #ffc439 !important;color: white !important;} .shopify-payment-button__button{background: #ffc439 !important; color: white !important;}
Just removed other code that affecting from your slider file.
Now you can manage code by "home_slideshow.liquid" file
You wan to change all button color to #ffc439 ?
Or any specific button ?
Hi Jasoliya! I would like to change all Homepage Slider buttons "Shop Now" so that they are more visible. White doesn't give me enough contrast. Also, same color I would like to apply to "Buy it Now" on all product pages. Could you advise me please 🙂
Hi,
Follow this:
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file
.shopify-section .site-box.box__slideshow-split .slideshow-item .site-box .button{ background: #ffc439 !important; color: white !important;}
.shopify-payment-button__button{background: #ffc439 ; color: white ;}
Note: you can change color.
Hi Jasoliya,
I applied your code at the bottom of css_main.scss.liquid
The homepage slideshow buttons are now yellow on mobile, but remain white on desktop. Buttons also remain same in the product page both on mobile and desktop. What do you think went wrong? Thank you for looking into this
Add this:
@media screen and (min-width: 768px), screen and (min-width: 1024px) and (orientation: landscape){ .shopify-section .site-box.box__slideshow-split .slideshow-item .site-box .button { background: #ffc439 !important; color: white !important; }}
Replace this:
.shopify-payment-button__button{background: #ffc439 !important; color: white !important;}
Hi Jasoliya,
unfortunately I don't see any changes taking place. Just like last time, the yellow homepage buttons appear only on mobile.
These are the last lines of my CSS:
that's because of in you index page this css given as important so place this css in theme.liquid file in head with <style> tag, or add me as staff(jasoliyabrijesh123@gmail.com) i will do
I just added you as staff. Thank you Jasoliya, I'll review your changes so I have a better understanding of this myself 🙂
Done , Check now
That worked! Thank you for the patience. Could you paste the final code here so that I can accept it as your solution? 🙂
This is an accepted solution.
I have added prev given code.
.shopify-section .site-box.box__slideshow-split .slideshow-item .site-box .button {background: #ffc439 !important;color: white !important;} .shopify-payment-button__button{background: #ffc439 !important; color: white !important;}
Just removed other code that affecting from your slider file.
Now you can manage code by "home_slideshow.liquid" file
Hi Jasoliya,
I'm having issues with the "Buy now" button recently, sometimes it won't load or it's taking more time to load than other buttons. You think that can be an issue of the change we made? Since the image:
Additional button load by shopify server so we can not interact with this, this button take little time then other its natural.
I decided to remove the dynamic button as it slows down the load time and I prefer to have a fast, functioning product page. Would you mind showing me a code on how to turn the "Add to Cart" button yellow instead of the dynamic button we did previously? I'd really appreciate that. I can paste it in the CSS myself!
Remove below css from asset->theme.scss file from bottom
.shopify-payment-button__button{background: #ffc439 !important; color: white !important;}
Add this css:
[name="add"]{background: #ffc439 !important; color: white !important;}
Should I replace it with
[name="add"]{background: #ffc439 !important; color: white !important;}
Or add it all the way below?
Yes, you can replace.
That worked. Thank you. Could just the text turn black when hovering over?
add this one:
[name="add"].button:hover {background: black!important;}
thank you Jasoliya!
Hello Jasoliya,
previously you helped me to customize the "Split Screen Slider" in the homepage with turning the "Shop Now" button yellow permanently.
I now added new sections "Images with Text Overlay" and Split Theme restricts me to using only black and white colors for the text and buttons too.
Would it be possible to have the text and buttons the same blue #257ba0 as in the Split Screen Slider? The buttons can remain orange on hover over. I just need that black going away 🙂
Send me your store url
Looking for this all section?
Yes all the sections with black font and black buttons
Add in Asset->css_main.sccs at bottom of file
.content .button{ background-color: black !important; color: white !important;}
Pasted it in the bottom, but I don't see any changes taking place
you said that "yes all the sections with black font and black buttons"
i can see all in black text and black button
Think that was a misunderstanding 🙂
This was my message:
"Would it be possible to have the text and buttons the same blue #257ba0 as in the Split Screen Slider? The buttons can remain orange on hover over. I just need that black going away :)"
I need to replace the black with the blue - both text and buttons. And keep the buttons orange when hovering over.
Check now, i have coded in theme directly.
Yes this is it! And could the text be also blue?
Send me color code, if we use color same for both then text will not show
Yeah I wanted the same #257ba0. How come the text is not customizable?
check now text will not show due to same color.
Ohh not the button text, but the text above the button :)) Sorry if I wasn't clear!
Check now
Thank you Jasoliya! 🙂
Hey Jasoliya you seem pretty good at this. I am using the Turbo theme and have a little issue with the colors. I want to change my home banner CTA button (shop now) from black to white on mobile view (it is white on desktop because you can edit the color for the banner buttons on desktop but not on mobile for some stupid reason). The button on mobile view is for some, again stupid, reason connected to all of the normal text, so if I change the text color to white, all of the text changes to white, and white text on a white background doesn't really work to be honest 😄 . Could you instruct me on how to change the color of the mobile button only? Thank you in advance for your time.
Hi @Fobias888
Send your store url
Hello! I am looking to change only Add To Cart button on my website.
I tried your code, but it doesn't work for me.
Can you help, please?
I use Split Theme as well.
I want it to be a more bright color, for example
#87c8a9. Because now it is just white:
Hey Jasoliya,
Can you tell me how to create product image slider on Product Page in debut theme
For that need custom code cant we sent any step for that may be this help if you know coding
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024