Split Theme: Changing button colors across the whole theme

Solved
Highlighted
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

0 Likes
Highlighted
Shopify Expert
3903 559 936

You wan to change all button color to #ffc439 ?

Or any specific button ?

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Excursionist
33 0 0

Hi 

0 Likes
Highlighted
Shopify Expert
3903 559 936

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 to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
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

0 Likes
Highlighted
Shopify Expert
3903 559 936

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 to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
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;
}}
0 Likes
Highlighted
Shopify Expert
3903 559 936

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 to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
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 :)

0 Likes
Highlighted
Shopify Expert
3903 559 936

Done , Check now

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here