Quantity Selector (plus & minus) Will Not Change Quantity - Palo Alto

Store Design
,

Topic summary

Quantity +/- on a Shopify Palo Alto theme product page stopped changing the quantity. The public product link showed a dropdown (working), so a preview theme link was requested to see the actual +/- issue.

After the preview was shared, a JavaScript fix was provided: add code in theme.js to bind the .quantity__btn–decrease and .quantity__btn–increase buttons to update the .quantity__input value (respecting the input’s min). This corrected the non-responsive controls.

The original reporter confirmed the fix resolved their issue.

A new participant asked if the same approach applies to Shopify’s Dawn theme. Their product page quantity resets to 1 after clicking up/down due to an auto-refresh, while the cart quantity works. They also cannot locate a theme.js file and noted use of login/wholesale apps. No resolution was provided for Dawn; the question remains open.

Summarized with AI on December 26. AI used: gpt-5.
1

I am using the Palo Alto theme and the quantity selector plus and minus are not increasing or decreasing the quantity anymore. Not sure how to solve this issue. If anyone can help get it back on track it would be much appreciated.

https://actionflag.com/collections/american-flags/products/american-flag-endura-nylon-outdoor-flag-lockstitched-fmaa-certified-made-in-the-usa

2

Hi @vavagraphics
The URL you provided which show quantity dropdown not the plus minus selector & it working fine.
If you are working on the duplicate / preview theme then can you please share that URL. How to get a preview URL from duplicate theme Check screenshot

3

@Huptech-Web Thanks for the help. The preview link is here: https://xyel521zex0uz98x-74695311650.shopifypreview.com

Direct product here: https://xyel521zex0uz98x-74695311650.shopifypreview.com/collections/outdoor-american-flags/products/american-flag-endura-nylon-outdoor-flag-lockstitched-fmaa-certified-made-in-the-usa

4

Hi @vavagraphics
Add the below code to the theme.js file. This will resolve the issue with quantity selector.

const decreaseButton = document.querySelector('.quantity__btn--decrease');const increaseButton = document.querySelector('.quantity__btn--increase');const quantityInput = document.querySelector('.quantity__input');function decreaseQuantity() {let currentValue = parseInt(quantityInput.value, 10);const minValue = parseInt(quantityInput.min, 10);if (currentValue > minValue) {currentValue--;quantityInput.value = currentValue;}}function increaseQuantity() {let currentValue = parseInt(quantityInput.value, 10);currentValue++;quantityInput.value = currentValue; }decreaseButton.addEventListener('click', decreaseQuantity);increaseButton.addEventListener('click', increaseQuantity);
1 Like
5

@Huptech-Web Thank you for your help! This one has been bothering us!

1 Like
6

Does this work with the Dawn theme? I am having the same issue. When customers try to adjust the quantity on the product page by clicking up or down, the page will automatically refresh and put the quantity back to 1. The quantity can be successfully changed in the cart though.

I cannot, however, find theme.js in my code editing area. I also have a login app to hide pricing from non-registered customers and a wholesale app that allows for wholesale and customer specific pricing discounts.

my website is www.modernendoscopeparts.com - here is a sample product: https://www.modernendoscopeparts.com/products/biopsy-channel-2-8mm-id-x-1850mm-l-white-with-no-spring-eptfe-and-ptfe