Change quantity selector to drop down and dynamically update the options based on real stock availability

Store Design
,
1

How can I change my quantity selector to a dropdown? I would like the options shown to be reflective of the available variant inventory. Theme is calle dgrid by pixel union.

2

Hey @LycetteGreg :waving_hand:

Yes—you can swap the qty input for a dropdown that automatically caps at the selected variant’s available inventory in Grid (Pixel Union).

1) Replace the quantity input with a <select>

In your product form (usually sections/product-form.liquid or templates/product.liquid), replace the qty input block with:

<label for="Quantity-{{ section.id }}">Quantity</label>
<select id="Quantity-{{ section.id }}" name="quantity" class="quantity__select"></select>

<script type="application/json" id="ProductJSON-{{ section.id }}">
  {{ product | json }}
</script>

2) Add the logic (below the form)

<script>
(function() {
  const sel = document.getElementById('Quantity-{{ section.id }}');
  const productData = JSON.parse(document.getElementById('ProductJSON-{{ section.id }}').textContent);

  // Render 1..max (cap to 20 for UX; change if you like)
  function renderQty(max) {
    const limit = Math.max(0, Math.min(max, 20));
    sel.innerHTML = '';
    if (limit === 0) { sel.disabled = true; return; }
    sel.disabled = false;
    for (let i = 1; i <= limit; i++) {
      const o = document.createElement('option');
      o.value = i; o.textContent = i;
      sel.appendChild(o);
    }
  }

  function updateQtyForVariant(variant) {
    if (!variant) { renderQty(0); return; }
    // If “Continue selling when out of stock” is ON, allow up to 20
    const canOversell = variant.inventory_policy === 'continue';
    const available = canOversell ? 20 : Math.max(0, variant.inventory_quantity || 0);
    renderQty(available);
  }

  // 1) When the variant changes (Grid emits a variant event in most versions)
  document.addEventListener('variant:change', (e) => updateQtyForVariant(e.detail?.variant));

  // 2) Fallback: listen to variant <select> change
  const idSelect = document.querySelector('select[name="id"]');
  function findVariantById(id) { return productData.variants.find(v => v.id == id); }
  idSelect && idSelect.addEventListener('change', () => updateQtyForVariant(findVariantById(idSelect.value)));

  // 3) Initial render
  const initialId = idSelect ? idSelect.value : productData?.variants?.[0]?.id;
  updateQtyForVariant(findVariantById(initialId));
})();
</script>

3) (Optional) Small style tweak

.quantity__select { min-width: 110px; padding: 8px; }

That’s it—the dropdown will always show 1…available for the chosen variant, disable itself when out of stock, and respect “continue selling” by offering up to your chosen cap.

:hammer_and_wrench: You can check out our Shopify Partner profile — we’ve built and shared several free Shopify app solutions to help store owners. Feel free to explore our profile and see how our apps can make your Shopify experience better!

3

I am having a hard time finding what to remove and where to add this

4

Hi @LycetteGreg ,

Yes its possible. If you’d like me to handle it, please share the collaborator code so I can edit the theme accordingly.

Thank you

5

Hi @LycetteGreg

Ok dear, please share your store URL and collaborator code with me so I can check and provide you with the proper solution.

6

It varies, it depends on the theme, if there’s a custom liquid block put the code in there.
And disable the regular quantity selector if it’s it a setting or block.

Otherwise it’s an advanced theme customization to get working and test properly.
Reach out to me if you need real services(click profile pic on forums for :e_mail: options).