Split Theme: Changing button colors across the whole theme

[ViktorPika]

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

[Jasoliya]

You wan to change all button color to #ffc439 ?

Or any specific button ?

[ViktorPika]

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 :)

[Jasoliya]

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.

[ViktorPika]

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]

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

[ViktorPika]

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]

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 

[ViktorPika]

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

[Jasoliya]

Done , Check now