Product variants

One exact version of a product that can be bought and stocked, such as the blue shirt in medium, with its own SKU, price, and inventory.

the exact size and color versionevery version of a productthe medium blue onethe dropdowns for size and colourproduct varientsdifferent versions of the same itemwhy is one colour more expensive than the othersthe thing that actually goes in the basket

See it

Live demo coming soon

What it is

A product is the shared idea, while a variant is one exact purchasable combination of its options. 'Classic Tee' is the product; 'Classic Tee, navy, medium' is a variant with its own ID, SKU, price, image, weight, and stock count. The cart buys a variant, never an abstract parent product.

Reach for variants when choices affect fulfillment or availability. Color and size usually do; a gift-message textbox usually does not. Store only combinations you really sell instead of blindly generating the full cartesian product of every option value.

Gotcha: every selection must resolve to one valid variant. Disable impossible and sold-out combinations without making them disappear, then update the price, image, SKU, stock message, and URL together. A picker that says blue while the cart receives red has split its state.

Ask AI for it

Model product variants as an explicit typed list, not a generated cartesian product. Give every variant an immutable ID, SKU, option-value map, price, image ID, weight, and available-to-sell count. Build accessible radio groups for Color and Size, resolve the selected values to exactly one variant, disable invalid combinations, and update the gallery, price, SKU, stock message, and add-to-cart payload atomically. Write the selected variant ID into URLSearchParams so refresh, back, and shared links preserve the exact choice.

You might have meant

product optionskuproduct cataloginventorypdp