Wonpa docs

Appearance

Size matrix ordering ​

Products with two options — typically color and size — replace the standard variant picker with an order grid. Buyers type quantities into each cell and add the whole size run to the cart in one step. Row and column totals update as they type, and the price-per-unit line reflects the best volume tier the order has reached.

The size matrix on a product page, with two rows partially filled

The matrix appears automatically. There is no setting to turn on: any product with exactly two options gets the grid, and products with one option (or none) keep the regular picker.

How buyers use it ​

Each color is a row. Under every row there are three text buttons:

  • +1 each adds one unit to every size in the row.
  • Curve fills the row with a standard size curve (weighted toward the middle sizes).
  • Clear empties the row.

The footer shows a per-size total, a grand total in units, and the order subtotal. The add-to-cart button stays disabled until the order meets the product's minimum.

Setting order minimums and case increments ​

The matrix reads quantity rules straight from Shopify — there is nothing to configure in the theme.

  1. In your Shopify admin, open the product and select a variant.
  2. Under Purchase options, set the quantity rule: minimum, maximum, and increment.
  3. Save. The matrix now snaps typed quantities to the increment and won't allow adds below the minimum.

Note: Quantity rules ship with Shopify's B2B features. On stores without them, the matrix falls back to a minimum of 1 with no increment.

If a buyer types a quantity the rule doesn't allow, the cell snaps to the nearest valid value. When stock runs lower than what a buyer requests, the cell caps at what's actually available — counting what's already in their cart — and a notice appears explaining the cap.

Stock display ​

Cells for out-of-stock variants are disabled. When inventory tracking is on and overselling is off, the matrix caps each cell at the sellable quantity. Variants that allow overselling accept any quantity.

When a buyer clicks into a row, the product gallery jumps to that color's image, if the variant has one assigned. Assign images to variants in the Shopify admin under the product's Variants section. With Show only the selected variant's images enabled, the gallery also hides other colors' photos — see Variant-scoped galleries.