Change color of load more button on collection page

Store Design
1

Hi,

I’m having trouble finding how to change the colour of the load more button that appears at the bottom of the page

OscarDI_0-1639440980787.png
OscarDI_0-1639440980787.png452×206 3.07 KB

1 Like
2

@OscarDI

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
3

[email removed]KetanKumar

https://dragon-image.myshopify.com/

1 Like
4

Hello @OscarDI ,

Your store is password protected can you please share the password with us?

So that we can help you to change the color of load more button by sending you the CSS code which you can add to your theme file.

5

@OscarDI

thanks for URL, but how can i check its password protect

6

@rutvik_shop @KetanKumar

sorry about that, password has been disabled

1 Like
7

@OscarDI

Go to your code editor > Assets > style.scss.css and paste below line at the bottom of the file:

.usf-sr-more .usf-load-more {
    background-color: #000 !important;
    color: #fff !important;
}

you can change the value of background color and color as per your requirement

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

8

@Savior i dont have that file. i pasted the code you gave me in style.scss.liquid but it didn’t work and caused some other issues as well

9

Hello,

I have checked your collection page and for changing Load More button color please add this code in

assets → usf.css file.
I have changed the button color to green color which is currently on home page buttons.

.usf-load-more {
background: #91d724 !important;
border-color: #91d724 !important;
color: #fff !important;
}
10

Hello @OscarDI ,

Please add the below code to your main.scss.css theme file at the bottom:

.usf-sr-more .usf-load-more {
    border: 2px solid #91d724 !important;
    background-color: #91d724 !important;
    color: #fff !important;
}

If you do not find this file then search for the usf.css file as well. Hope this will help you out.

1 Like
11

@Anonymous

i tried entering that and it didn’t work, however i checked that file and found a line of code that’s very similar already in there.

usf-load-more{border-radius:0;background:none;cursor:pointer;line-height:normal;letter-spacing:2px;font-size:16px;font-weight:900;border:2px solid #91d724;background-color:#91d724;color:#91d724;padding:15px;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:300px;display:block;margin:16px auto 0;text-transform:uppercase;text-decoration:none;text-align:center;outline:none;min-height:initial;height:initial}.

you can see I have tried to change the color to that green as well, but still no change from the current color

12

@rutvik_shop THANK YOU SO MUCH

was beginning to lose hope with all the failures

1 Like