How do i set quantity selector for variants?

Shopify Discussion

Topic summary

Issue: Adapting quantity selector logic from product-level to variant-level in a Shopify Dawn theme.

  • Previously, a product-level metafield (product.metafields.custom.specialsettings, true/false) controlled minimum quantity and step in main-product.liquid via JavaScript.

  • The script sets min=50 and step=10 when true; otherwise min=1 and step=1. It also enforces the minimum on input change.

  • After introducing multi-variant products, the same approach with a variant-level metafield (variant.metafields.custom.specialsettings) does not work.

  • The user seeks guidance on how to reference and apply variant-specific settings to the quantity input when variants are selected.

Key terms:

  • Metafield: custom data attached to products/variants used to drive theme logic.
  • Variant: different versions of a product (e.g., size, color) with their own data.

Status: No solution or action items yet; the question is open with unresolved implementation details. Code snippet is central to understanding the current approach.

Summarized with AI on January 5. AI used: gpt-5.
1

Hey everyone, I’m a bit stuck and could use your help. Up until now, my shop (Dawn theme) only had simple, single-variant products,but now we have introduced products with different variants. Previously, for simple products, I easily set up a true/false type metafield (product.metafields.custom.specialsettings), flipped it to True for products where I wanted a minimum order quantity, and popped this code into the main-product.liquid

<script>
document.addEventListener('DOMContentLoaded', function() {
  var specialSettings = {{ product.metafields.custom.specialsettings | json }};
  var quantityInputId = "Quantity-{{ section.id }}";
  var quantityInput = document.getElementById(quantityInputId);

  // minimum mennyiség és lépésköz beállítása
  if (specialSettings) {
    quantityInput.setAttribute('min', 50); // Minimum mennyiség beállítása
    quantityInput.value = Math.max(50, parseInt(quantityInput.value, 10)); // Biztosítjuk, hogy az érték ne legyen kisebb, mint 50
    quantityInput.setAttribute('step', 10); // Lépésköz beállítása
  } else {
    quantityInput.setAttribute('min', 1); // Alapértelmezett minimum mennyiség
    quantityInput.setAttribute('step', 1); // Alapértelmezett lépésköz
  }

  // input változások figyelése, hogy a minimum mennyiség betartásáért
  quantityInput.addEventListener('change', function() {
    var currentValue = parseInt(quantityInput.value, 10);
    var minValue = parseInt(quantityInput.getAttribute('min'), 10);
    if (currentValue < minValue) {
      quantityInput.value = minValue; // Ha a jelenlegi érték kisebb, mint a minimum, akkor minimum
    }
  });
});
</script>

But now, trying to apply the same logic to variants, it just doesn’t seem to work. I tried setting up a variant-level true/false metafield (variant.metafields.custom.specialsettings), setting it to True where needed, but no dice. Could anyone point me in the right direction on what I might be missing?