Store Page > Quantity Up / Down icon

In the theme we have chosen the quantity increase decrease arrows are too small and visible only on hover.  Customers are unable to increase quantity. Is there a way to increase the size of the up/down arrows and make them always visible. 

Thanking you in advance. 

In the theme we have chosen the quantity increase decrease arrows are too small and visible only on hover.  Customers are unable to increase quantity. Is there a way to increase the size of the up/down arrows and make them always visible. 

See screenshot below

Thanking you in advance. 

There's more detail in the post below (along with some potential workarounds) but essentially how the arrows display is set by the browser, so it's trickier to customise with code. 

In addition to the arrow buttons, customers can type their desired quantity into the box. On desktop, they can also click into the quantity box and use the up and down arrows on their keyboards to increase/decrease the quantity. 

Thank you katycarlisle. Looks like there is not solution for this critical issue. Is this the same with all SqSp templates? 

I am losing business because of this. People wanting to buy more than 1 unable to buy more than 1. 

Thank you anyways. Enjoy your weekend. 

On 8/22/2024 at 2:48 AM, eZeeBags said:

the quantity increase decrease arrows are too small and visible only on hover.  Customers are unable to increase quantity. Is there a way to increase the size of the up/down arrows and make them always visible. 

Hey @eZeeBags

It will depend on which browser/platform your users are experiencing difficulties with. Have you spoken to any of them about the browser they are using?

Regardless of the buttons, all users, on all platforms, should be able to tap into the box and type a quantity. That said, I agree that the spin buttons can be very small on desktop platforms and, by default, they only appear on hover. 

Chome example on hover: 

Adding to @katycarlisle's comments, it is very difficult to get a consistent result across different browsers and platforms because the Quantity box uses the native input element and this is rendered differently in each.

That said, I can improve the situation on Chrome, Safari and Edge (not Firefox). The following screenshots were taken after my CSS was applied, without hovering over the control:

Chrome/MacOS:

Safari/MacOS:

Opera/MacOS:

Edge/Windows:

Add to Custom CSS:

/* Always show quantity up/down */
/* tip by SF.DIGITAL            */
.product-quantity-input {
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    opacity: 1; /* visible always */
     transform: scale(2); /* larger */
  }
}

Not production tested.

If you require more control over the way users change the quantity, you will need to write some Javascript to add your own controls. For example:

Did this help? Please give feedback by clicking an icon below  ⬇️