Map each supported variant to SKU, stock and imagery
Enumerate valid color-and-size combinations before designing selectors, then attach the sellable SKU, stock and correct image to each row. Keep a never-made combination distinct from temporarily unavailable stock. The selected identity must remain consistent through product detail, cart and order rather than merely changing the visible swatch.
Worked example — illustrative data.
| Combination | SKU and stock specimen | Image requirement |
|---|---|---|
| Navy / S | SH-NS; available | Navy shirt plus size guide |
| Navy / M | SH-NM; unavailable | Navy shirt; unavailable state clear |
| Cream / S | SH-CS; available | Cream shirt, not navy |
| Cream / M | SH-CM; available | Cream shirt plus selected size state |
List the allowed option values, then enumerate valid combinations before building selectors. Attach a SKU, inventory owner, relevant image and approved price to each sellable row. Distinguish a combination the business never makes from one that is temporarily unavailable. Check the chosen identity through product page, cart and order record using synthetic data. Verify the actual store interface and current limits before giving procedural instructions.
Reconcile each allowed combination through the cart
Select every supported size-and-finish combination for the sample shirt, then compare the selected SKU, image, availability and cart line. Check unavailable navy medium without silently switching the shopper to another size. If an option changes price, dimensions or care instructions, update those details with the selection. Keep undefined combinations outside the purchase path.
Decision: Do not launch a selector that can create an undefined combination. Resolve missing SKU or image mappings before adding more option values.
A material option may change fit and care requirements: A material option may change fit or care instructions as well as appearance. The page must update the affected information or treat the item as a distinct product where that better serves the buyer.
Continue with Guides for stores, software teams and local businesses, eCommerce website design and development and Product variants and canonical URLs.
For Shopify variants, see Shopify variant documentation (checked November 2026).