Split Theme: Changing button colors across the whole theme

Store Design
1

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

2

You wan to change all button color to #ffc439 ?

Or any specific button ?

3

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

4

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.

5

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

6

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

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

8

that’s because of in you index page this css given as important so place this css in theme.liquid file in head with tag, or add me as staff(jasoliyabrijesh123@gmail.com) i will do

1 Like
9

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

10

Done , Check now

1 Like
11

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

12

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

1 Like
13

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
buy now is gone.JPG3675×1649 482 KB

14

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

15

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!

16

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

Should I replace it with

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

Or add it all the way below?

18

Yes, you can replace.

19

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

20

add this one:

[name="add"].button:hover {background: black!important;}