Treat selection as a complete state: the chosen options must resolve to one variant identity, and that identity must agree with the displayed price, media, and availability. When no matching variant exists, explain the combination and remove stale variant details.
Keep the native template and section responsibilities clear
Shopify's product-template documentation identifies the product content, media, and product form as part of the product page. In a JSON template, HTML and Liquid belong in a referenced section rather than inside the JSON template itself. Plan the native product.json, section, and variant handling together; a standalone visual mockup does not replace them. Shopify's product-template documentation
For a later implementation brief, identify the actual theme version, product data, section, selector handlers, form variant identity, quantity behavior, and media fallback. Real prices, currency formatting, and orderability must be checked in the store. These details have not been supplied for this example, and no native template has been installed or tested.
Use a fixture table with explicit missing combinations
The original fictional product P01 is a notebook with Color options Amber and Blue, and Pages options 48 and 96. The following are mock records, not live inventory:
| Variant ID | Color | Pages | Illustrative USD price | Planned media placeholder | Mock orderable |
|---|---|---|---|---|---|
| V01 | Amber | 48 | $8 | M01 | True |
| V02 | Blue | 48 | $9 | M02 | False |
| V03 | Amber | 96 | $12 | M03 | True |
| No matching variant | Blue | 96 | Not available | No variant-specific media | No variant to order |
M01–M03 are planned original placeholders, not actual product photographs. The orderable flags are supplied mock rules, not verified stock or a promise that a purchase would succeed.
Start the demonstration with V01: Amber, 48 pages, $8, M01. Changing Pages to 96 while keeping Amber selects V03. The complete new state is V03, Amber, 96 pages, $12, M03, mock orderable true. If the old $8 or M01 remains, the review should flag the mismatch even though the selector itself appears correct.
Distinguish unavailable from nonexistent
Choosing Blue and 48 resolves to V02. Show its own $9 and M02, with “Not orderable under the supplied mock rule.” The fact that another variant is orderable does not establish that V02 is orderable.
Choosing Blue and 96 resolves to NoMatchingVariant. Keep Blue and 96 selected so the explanation names the requested combination, but clear the previous selected variant ID, price, and variant-specific media. Display “No matching variant for Blue / 96 pages.” Do not substitute V03 or continue showing its $12 as the price of the missing combination.
For the proposed visual demonstration, specify cart and checkout controls as absent or disabled throughout. No selection should submit an order, change stock, or update a cart. The purpose is to review consistent variant state before implementing the real native flow.
Include direct-link and null-state checks in the native brief
Shopify's variant guidance describes direct variant links and links using option-value IDs. For a nonexistent option-value combination, the requested options can remain selected while the selected-variant fields return null. It also requires the media, price, and selector to reflect the selected variant. Shopify's variant-handling documentation
V01–V03 are illustrative labels, not actual Shopify IDs for URLs. The native implementation must map real IDs and option order, handle initial selection and subsequent changes, and test valid direct links and missing combinations. It must also validate the actual product-form behavior in the theme. A successful local mock selection does not test the server-side store or cart.
Keep an expected-state matrix beside the implementation brief. Include V01 to V03, V03 to V02, V03 to Blue/96, and recovery from Blue/96 back to Amber/48. The last transition should restore V01's own details rather than leave the page in a stale error state. Accessible option labels and understandable status messages belong in the actual theme checks.
Copy this prompt for the native implementation brief
Prepare a complete US English native Shopify product-template implementation brief and expected-state matrix, plus a separately labeled visual mockup specification. Do not claim actual theme installation,store fetch,inventory verification,cart submission or purchase.
Native artifact: product.json references a section containing HTML/Liquid product content,media,product form and selected-variant flow. Actual themeversion,section/handlers,quantity behavior,currencyformat,mediafallback,realIDs/optionorder/form/availability require storevalidation. StandaloneHTML mock is onlyvisualreview,notnativeartifactreplacement.
Original mock productP01Notebook: ColorAmber/Blue;Pages48/96. V01Amber48 USD8/M01/orderabletrue;V02Blue48 USD9/M02/orderablefalse;V03Amber96 USD12/M03/true. Blue96 has no variant. Media placeholders planned,notphotos;flagsmock,notstock.
ExpectedV01->V03:IDV03/Amber96/USD12/M03. V02:ownID/Blue48/USD9/M02/notorderable under mockrule,never infer from parent/another variant. Blue96:NoMatchingVariant/null;retain chosenoptions,clearpreviousvariantID/price/variant-specificmedia and explain missingcombo. ReturnAmber48 restoresV01details.
Include expected-state table for those transitions;native direct-link and invalidoptioncombination tests must map actualIDs,notmockVlabels. Handleinitialselection andsubsequentchanges coherently;media/price/selector synchronized. Documentactualtheme/store/cartchecks stillpending,includingaccessiblelabels/statuses.
Mock cart/checkout absentordisabled,noactualsubmission/data/inventoryupdate. No guarantees thatNOSrendering provesShopifycompatibility. NativeShopifytemplate/form/runtime retained. Returnbrief/matrix/specification only,notclaimedworkingnativecode.
An optional separate variant review in NOS
NOS can save and render a prepared HTML mock review copy that shows the supplied variant states. Use it to inspect whether the ID, options, price, and media agree after any proposed mock controls have been built and tested. Keep the native Shopify template and actual theme, product-form, and store validation separate; NOS rendering does not perform them.
Finish the design review with one coherent state for every supplied variant and an explicit empty result for Blue / 96, then verify the native flow before enabling any real purchase action.