Solved

Split Theme: Changing button colors across the whole theme

ViktorPika
Excursionist
33 0 0

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

Accepted Solution (1)
Jasoliya
Shopify Expert
4808 621 1217

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

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 42 (42)

Jasoliya
Shopify Expert
4808 621 1217

You wan to change all button color to #ffc439 ?

Or any specific button ?

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

Hi 

Jasoliya
Shopify Expert
4808 621 1217

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.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

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

Jasoliya
Shopify Expert
4808 621 1217

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;} 
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

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:

 

.product-badge.sale {
  background: #ffc439;
  color: #ffffff !important;
}
.shopify-section .site-box.box__slideshow-split .slideshow-item .site-box .button {
  background: #ffc439 !important;
    color: white !important;
}
 @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;
}}
Jasoliya
Shopify Expert
4808 621 1217

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 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

I just added you as staff. Thank you Jasoliya, I'll review your changes so I have a better understanding of this myself 🙂

Jasoliya
Shopify Expert
4808 621 1217

Done , Check now

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

That worked! Thank you for the patience. Could you paste the final code here so that I can accept it as your solution? 🙂

Jasoliya
Shopify Expert
4808 621 1217

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

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

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:

 

buy now is gone.JPG

Jasoliya
Shopify Expert
4808 621 1217

Additional button load by shopify server so we can not interact with this, this button take little time then other its natural. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

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!

Jasoliya
Shopify Expert
4808 621 1217

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;} 

 

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

Should I replace it with 

[name="add"]{background: #ffc439 !important; color: white !important;} 

Or add it all the way below?

Jasoliya
Shopify Expert
4808 621 1217

Yes, you can replace.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

That worked. Thank you. Could just the text turn black when hovering over?

Jasoliya
Shopify Expert
4808 621 1217

add this one:

[name="add"].button:hover {background: black!important;}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

thank you Jasoliya!

ViktorPika
Excursionist
33 0 0

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 🙂

Jasoliya
Shopify Expert
4808 621 1217

Send me your store url

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0
Jasoliya
Shopify Expert
4808 621 1217

Looking for this all section?

section.png

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

Yes all the sections with black font and black buttons

Jasoliya
Shopify Expert
4808 621 1217

Add in Asset->css_main.sccs at bottom of file

.content .button{    background-color: black !important;    color: white !important;}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

Pasted it in the bottom, but I don't see any changes taking place

Jasoliya
Shopify Expert
4808 621 1217

you said that "yes all the sections with black font and black buttons"

i can see all in black  text and black button 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

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.

Jasoliya
Shopify Expert
4808 621 1217

Check now, i have coded in theme directly. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

Yes this is it! And could the text be also blue?

Jasoliya
Shopify Expert
4808 621 1217

Send me color code, if we use color same for both then text will not show

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

Yeah I wanted the same #257ba0. How come the text is not customizable?

Jasoliya
Shopify Expert
4808 621 1217

check now text will not show due to same color.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

Ohh not the button text, but the text above the button :)) Sorry if I wasn't clear!

Jasoliya
Shopify Expert
4808 621 1217

Check now

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ViktorPika
Excursionist
33 0 0

Thank you Jasoliya! 🙂

Fobias888
Visitor
1 0 0

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.

Jasoliya
Shopify Expert
4808 621 1217

Hi @Fobias888 

Send your store url 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Norz
Visitor
1 0 0

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:


Знімок екрана 2022-08-08 о 10.16.26.png

Usmanh
Visitor
2 0 0

Hey Jasoliya, 

Can you tell me how to create product image slider on Product Page in debut theme

Jasoliya
Shopify Expert
4808 621 1217

For that need custom code cant we sent any step for that may be this help if you know coding 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here