A product page can offer two colors and two sizes without selling every possible combination. If the page treats those choices as interchangeable labels, a customer may see the wrong photograph, select an unavailable version or add a different item to the cart.
Before publishing, map the combinations you actually offer. Then use that map to check the listing one selection at a time. The aim is to make each choice describe one real variant, with consistent information from the product page to the cart.
List combinations, not just option names
Start with the product information you have verified for this listing. Record each offered combination on its own row, along with its internal identifier, image reference, price and selling status. A stock-keeping unit, or SKU, can help distinguish variants when your store uses one.
Do not create an offered variant merely because the option names allow you to imagine it. “Small and large” plus “charcoal and navy” gives four possible combinations, but your actual range may contain only three.
Shopify's product documentation describes variants as combinations of option values and lets merchants manage settings for individual variants. Your platform's controls may differ, so use its supported method rather than assuming that editing the overall product updates every combination.
Build a small example before checking the page
Consider a fictional pencil case with two color choices, Charcoal and Navy, and two sizes, Small and Large. This example store does not accept backorders. Its checked product record says:
- Charcoal / Small: Offered, currently available, internal SKU PC-CS.
- Charcoal / Large: Offered, currently sold out, internal SKU PC-CL.
- Navy / Small: Offered, currently available, internal SKU PC-NS.
- Navy / Large: Not offered. No product variant or SKU exists for this combination.
There are four possible grid positions, three offered variants and two currently purchasable variants. Those are different counts. The fictional codes are working identifiers for this example, not real products or a required naming convention.
Keep the two unavailable cases distinct. Charcoal / Large belongs to the range but cannot currently be purchased under this store's policy. Navy / Large is not a version the store offers. Calling both “temporarily sold out” would incorrectly suggest that Navy / Large could return to stock.
Check what changes with each selection
Use the platform's preview or another appropriate testing environment. Begin with a known selection, then change one option at a time. For the fictional page, move from Charcoal / Small to Charcoal / Large, then examine what happens if Navy is selected while Large remains selected.
Watch the selected labels as well as the purchase control. Does the page clearly explain an unavailable combination, reset to a valid one with an obvious change, or leave the customer looking at conflicting information? Do not assume that a disabled button alone explains which choice caused the problem.
For each valid combination, compare the displayed price and any variant-specific measurement or description with the checked record. A price shown before selection may not be the price of the selected variant. Verify the selected state itself rather than relying on the product's starting display.
Check both the initial page load and a later selection change. A page that starts correctly can still keep an old image or label after another option is chosen.
Keep photographs attached to the right variant
Associate each variant with the intended image or clearly explain any shared illustration. In the example, the Charcoal / Small photograph should not become evidence that Navy / Small has a charcoal finish.
If one photograph shows several colors or sizes together, make clear which item the customer has selected. Do not make the viewer infer the selection solely from the photograph's arrangement. A shared detail image may be useful, but it should not imply that a feature applies to a variant unless you have verified that it does.
Use the same color and size names in the selector, description and image notes. “Navy” in one place and “Blue” in another can introduce uncertainty unless their relationship is explained.
Follow an available choice into the cart
For each purchasable example, add one unit through the intended testing workflow and inspect the cart line. Check the product name, color, size, quantity and price. Where your testing tools expose the variant identifier, compare that too.
Remove the test line before checking the next combination so that an earlier selection does not hide a mistake. This check does not require submitting an order or making a payment.
For sold-out and unoffered combinations, confirm that the result matches the intended selling rules. Do not generalize the example's no-backorder policy to every store: preorder and backorder arrangements need their own accurate customer-facing information.
Leave a precise correction note
Record failures as a selected combination, expected result and actual result. “Navy / Small shows the Charcoal / Small image after a size change” is more useful than “variant photos wrong.” Retest the affected selection path after correcting it.
Finish with the checked version of the combination map and any unresolved rows. When a variant is added, removed or changed later, use those rows to identify which selectors, images, descriptions and cart behavior need another check.
