Shopify Quantity Selector

About this module

A quantity selector with minus/plus buttons that syncs with the product form's quantity input.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-quantity-selector, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-quantity-selector` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <div class="mh-qty" data-max="{{ section.settings.max }}">
     <button type="button" class="mh-qty-btn" data-dir="-1" aria-label="Decrease quantity">−</button>
     <input
       type="number"
       class="mh-qty-input"
       name="quantity"
       value="1"
       min="1"
       max="{{ section.settings.max }}"
       aria-label="Quantity"
     />
     <button type="button" class="mh-qty-btn" data-dir="1" aria-label="Increase quantity">+</button>
   </div>
   
   <script>
     (function () {
       var wrap = document.querySelector('.mh-qty');
       if (!wrap) return;
       var input = wrap.querySelector('input');
       var min = Number(input.min || 1);
       var max = Number(input.max || 99);
       wrap.querySelectorAll('.mh-qty-btn').forEach(function (btn) {
         btn.addEventListener('click', function () {
           var next = Math.min(max, Math.max(min, Number(input.value || min) + Number(btn.dataset.dir)));
           input.value = String(next);
           input.dispatchEvent(new Event('change', { bubbles: true }));
         });
       });
     })();
   </script>
   
   {% schema %}
   {
     "name": "MH Quantity Selector",
     "tag": "div",
     "settings": [
       { "type": "number", "id": "max", "label": "Max quantity", "default": 99 }
     ],
     "presets": [{ "name": "MH Quantity Selector", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.