How to customize a solid button in Sense theme?

Store Design
1

Hello there,

I hope someone from here can help me, I think maybe I’ll need a custom css or something for my issue, I’ll let the photos to talk…

L0unJzW
L0unJzW529×211 20.5 KB

ow8czwx
ow8czwx544×305 23.6 KB

2

@vladescupetrut

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.

3

http://puppyloft.ro

4

@vladescupetrut

thanks but which one look like first or second

5

So the first one need to be a solid buton for “Out of stock” and in the second photo is a product “Sale”

6

@vladescupetrut

yes i know but do you need both same look or different

7

Yes , the same

8

@vladescupetrut

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
span.badge.price__badge-sold-out.color-inverse {
    background: #5e3653 !important;
    border-color: #5e3653 !important;
}
9

Wow, it works! But now need to change the color of the text to white because now is in black at “out of stock” and its not clearly visible

10

Hi @vladescupetrut ,

I can see that you’ve already had help from @Ketank with editing the code on your theme to change the buttons. That’s perfectly fine, but I just wanted to make you aware that there is an option to do this that is inbuilt into the sense theme and doesn’t require any code editing:

12-46-68111-11273.png
12-46-68111-11273.png1170×533 66.5 KB

Meanwhile, can I ask how your preparations for BFCM are going?

11

Hello Andrew, yes i know about that settings but i needed that code, because it doesnt exist and border on my button “out of stock”

@KetanKumar can u please tell me how to modify the text color inside the solid button ?

And i have one more question if you guys can help me, on the home page at Featured collection, can i make it show in a random order not in alphabetical order ?

12

@vladescupetrut

yes, please share particular different product url so i will guide

13

this one have the color text white
https://puppyloft.ro/products/bluza-cu-imprimeu-de-craciun

and this one have text color black

https://puppyloft.ro/products/hanorac-pwcci-bej

14

@vladescupetrut

yes, please add this code

span.badge.price__badge-sold-out.color-inverse {
    background: #5e3653!important;
    border-color: #5e3653!important;
    color: #fff;
}