thegeneralyst/AnopaDocs
PDP

Quantity Number

Displays the currently selected quantity from the variant store as a read-only value.

APQuantityNumber shows the currently selected quantity from the variant store. It is the display-only counterpart to APQuantityIncrementer and AP_QuantityDecrement.

What it does

  • Reads the active quantity from the variant/store state.
  • Renders the quantity as text without providing any interaction.
  • Keeps the displayed value in sync with changes from APQuantityIncrementer and APQuantityDecrement.

How to set it up

  1. Place AP_QuantityNumber between AP_QuantityDecrement and AP_QuantityIncrementer in your quantity selector layout.
  2. Use the Font, Color, Min Width, and Align controls to match your design system.
  3. In the editor, toggle Show live in Canvas to preview the real store quantity, or use Canvas value for a fixed preview.

Key behaviours

  • Acts purely as a visual representation of the current quantity.
  • Respects minimum width to avoid layout shift as numbers change.
  • Alignment and typography can be customized to fit different layouts.

Property Controls

ControlTypeDefaultDescription
FontFont14pxTypography settings for the quantity number text.
ColorColor#000000Text color for the quantity number.
Min WidthNumber32pxMinimum width of the quantity display to prevent layout shift when the number of digits changes.
AlignEnumCenterText alignment for the quantity number: Left, Center, or Right.
Show live in CanvasBooleanfalseWhen enabled, shows the actual store quantity in the design canvas instead of a static preview value.
Canvas valueNumber1Static preview quantity shown on the canvas when live display is turned off.