A product selector must identify exactly what the customer is buying. Color swatches and size buttons are only the interface; the store also needs a consistent record for the chosen combination.
Related service: Website and ecommerce development- 01Choose options
- 02Resolve a valid variant
- 03Show current price and stock
- 04Add the exact item
- 05Verify the order record
SECTION 01
Separate options from sellable records
List which options affect the actual item: size, color, capacity, finish, or pack quantity. Identify combinations that never exist and those that are temporarily unavailable. A gift note is usually additional order information, not a new stock item. Ask the agency to explain the data model and how each selector resolves to the correct sellable record.
Shopify's variant documentation illustrates combinations of option values, while its inventory-state guidance distinguishes sellable stock from other quantities. Use these concepts to question the chosen platform's behavior rather than assume every store supports the same configuration. Decide whether a page initially selects a variant or asks the buyer to choose, and show the consequence clearly.
SECTION 02
Illustrative example: one finish is unavailable in one size
Imagine a lighting store sells a fixture in two finishes and several lengths. The longest brass version is unavailable, while shorter brass versions can be purchased. A generic 'in stock' label at product level misleads the buyer. The selector should explain the chosen combination's state and keep the other valid options discoverable.
If a visitor follows a saved link to the unavailable combination, preserve that context instead of silently switching to a different finish. Offer an alternative only as an explicit choice. Test the cart and order confirmation to ensure the selected finish, length, price, and image still match. This is an illustrative specification exercise, not a statement about a delivered store.
SECTION 03
Test option changes and data maintenance
Acceptance should include every structural variant pattern, invalid combinations, out-of-stock options, changing quantity, and returning from the cart. Check keyboard labels and visible names for swatches rather than relying on color alone. Verify that a stock change after page load is rechecked through the store's supported purchase flow.
Ask how staff add an option, retire a variant, or replace an image without changing stable identifiers used by integrations. More options can create a large maintenance burden; avoid modeling cosmetic preferences as separate inventory when they are really customization instructions. Hand over the option rules and test samples so a future catalog update does not reintroduce silent substitutions or mismatched order lines.
SECTION 04
Frequently asked questions
Should every combination be created?
Only valid sellable combinations should exist. Distinguish a combination that never exists from one that is temporarily unavailable.
Can a color swatch be the only label?
Provide an understandable name or equivalent label so the choice does not depend solely on seeing the color.
What if stock changes after selection?
Revalidate through the authoritative store flow and explain the changed availability before treating the purchase as confirmed.
PRIMARY REFERENCES
Sources and further reading
These references cover the standards, platforms, or published prices discussed in the guide. Worked examples and checklists are our editorial guidance.
- Product variantsShopify Help Center
- Understanding inventory statesShopify Help Center
EDITORIAL METHOD
About this guide
We use AI to assist with drafting and editing. Catapult AI Work is responsible for the published content. Examples illustrate possible approaches; they are not client case studies unless identified as such.
Budget examples are not Catapult package prices. Check linked provider pages for current fees and plan limits before making a purchase.
Read the editorial policy