Quantity Incrementer
The + button for the quantity selector on a PDP. Increments the quantity in the shared variant store by 1 on each click and disables itself at the variant's quantityAvailable limit.
What it does
Quantity Incrementor is the + button for the quantity selector on a product detail page (PDP). It increments the quantity in the shared variant store by 1 on each click and automatically disables itself when the quantity reaches the selected variant’s quantityAvailable limit.
Use it alongside AP_QuantityDecrement and AP_QuantityNumber to form a complete, accessible quantity selector that always respects available stock.
How to set it up
- Design your button in Framer
Create a + button that matches your PDP design (icon, label, hover/active states, etc.).
- Connect it to the Button slot
In the AP_QuantityIncrementer component, assign your designed button to the Button property control. This turns your visual design into a functional increment control.
- Place with related components
Position AP_QuantityIncrementer next to:
- AP_QuantityDecrement (− button)
- AP_QuantityNumber (numeric display/input)
Together they share the same variant store, so changes from any of them stay in sync.
Key behaviours
- Respects quantityAvailable
The component reads quantityAvailable from the currently selected variant and will not allow the quantity to exceed this value.
- Automatic disabling
The increment button becomes disabled (e.g. opacity 0.4, not-allowed cursor) when: