Quantity selector on Product page - Debut Theme

Store Design
1

Hello,

Need to make my product page’s quantity selector more visible. Right now it’s just the number 1 by itself. The quantity arrows don’t appear until you hover over them. I added a border color around it but the color only shows on desktop but not mobile.

www.buggie-huggie.myshopify.com

1 Like
2

@j1419

sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
}
3

@KetanKumar Thanks, that css worked great for desktop! But it’s not showing up on mobile. Is there a way to fix that

1 Like
4

@j1419

oh i see can you please provide device details so i will check and let you know

1 Like
5

@KetanKumar using the inspect element tool to test different device sizes from GalaxyS5, IphoneX, Pixel2. All mobile devices don’t show the quantity selector arrows.

6

@KetanKumar What css should I add to make a colored border around the quantity selector?

7

That is from your themes settings for form border colors, you currently have it set to transparent.

Be sure to check your other customer input forms like the contact page for similar issues.

Either change the core CSS in your theme.css to use a static value or other variable such as the font-color , or the shops primary accent blue color

.disclosure__toggle, input, select, textarea {
    border: 1px solid var(--color-border-form);
}

Alternatively continue to improperly override CSS instead of addressing the core CSS problems

input[type=number], input[type=number] {
    border: 1px solid var(--color-text);
}