Quantity

A minus button, a number field, and a plus button. The chosen quantity lives on the product, so <add-to-cart> and <buy-now> send that many units without any wiring.

<storesynk-product handle="example-product">
  <change-quantity min="1" max="10" class="qty-row">
    <decrease-quantity>−</decrease-quantity>
    <input-quantity></input-quantity>
    <increase-quantity>+</increase-quantity>
  </change-quantity>

  <add-to-cart>
    <button type="button">Add to cart</button>
  </add-to-cart>
</storesynk-product>

• <change-quantity> owns the bounds; min is also the starting value.
• The stepper buttons are the controls themselves: no nested button, and the engine makes them keyboard-operable with accessible names.
• <input-quantity> renders a labelled number input. Use the read-only <show-quantity> when you only display the number.

Options

Tag	Attribute	Default	What it does
change-quantity	min	1	Minimum and starting quantity.
change-quantity	max	Infinity	Maximum; steps and typed values are clamped.

Styling

.qty-row { display: inline-flex; border: 1px solid #ddd; border-radius: 8px; }
increase-quantity, decrease-quantity { width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; }
input-quantity input { width: 48px; text-align: center; border: 0; }

The stepper has no ss-* states of its own; loading and availability states live on add-to-cart.

Gotchas

• The buttons must sit inside <change-quantity>, and the whole stepper inside <storesynk-product>. Outside either it renders inert.
• If add-to-cart does nothing at any quantity, the problem is the store setup, not the stepper. See cart troubleshooting.

Related

• Quantity reference
• Add to cart and buy now