How to change the size of Plus (+) Minus (-) Quantity Selector on Supply Theme

Store Design
1

I would like to know how to change the quantity selector properties:

  1. -/+ size , color and position in the cell

  2. the frame color

colapig_0-1615800056519.png
colapig_0-1615800056519.png930×425 65.8 KB

Thanks,

Nicholas

1 Like
2

@colapig

Sorry for facing this issue, it’s my pleasure to help us.

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

Please share your site URL,
So I will check and provide a solution here.

3

Thanks for your reply and thanks for your help. The URL is
http://tenorstudio.shop

Regards,
Nicholas

4

Hii @colapig ,

  • Add below code at the bottom of the file ‘theme.scss.liquid’ (file path: Assets > theme.scss.liquid)
.js--qty-adjuster{
    padding: 10px 0 !important;
    width: 33px !important;
}
5

@colapig - add following css to the end of your theme.scss file and check , adjust numbers as per need

.js-qty{max-width: 125px; border: 1px solid #000;}  // this is for width and border

.js--qty-adjuster{width: 35px;  font-size: 25px;} //size of the -/+ fields

.js-qty input[type="text"]{font-size: 20px;} ///size of the input number

.js--add {border-left: 1px solid #000000;} //border around field

.js--minus {border-right: 1px solid #000000;} //border around field
6

I got this message when I open theme.scss file. Shall I need to rename the
file?

7

@colapig - no need to rename , I believe you are referring to scss support deprecated message

but please contact theme developers, right now it has scss code, so make sure existing code do not stop working.