When to use it

Use SearchProductVariantSelector when the page wants the SDK to resolve a search-backed product and derive the existing VariantSelector axes, selected variant, and option switching behavior for you.

It is the fast path for:

• PDPs backed by Search GraphQL product data
• quick-view or mini-PDP shells that already receive a search product record
• apps that want the existing selector UI without rebuilding search-product variant state locally

If the page already owns the variant axes and selected state, stay on VariantSelector instead.

Composition notes

SearchProductVariantSelector keeps the boundary sharp:

• VariantSelector stays presentational
• the connected wrapper owns search-product lookup, axis derivation, and best-next-variant selection

source supports the same adoption paths as the connected card:

• { type: "product", product }
• { type: "slug", slug }
• { type: "sku", sku }

Use onSelectedVariantChange when the page needs to react to the selected search variant without taking over the whole selector model. If the page needs direct access to the selected variant state or wants to render a custom PDP shell, drop to useSearchProductVariantSelector().

Behavior and theming guidance

Because this wrapper renders the standard VariantSelector, the shopper-facing option language, unavailable-state messaging, and control density should match the same presentational rules as the base selector.

Use the connected wrapper when variant resolution is the variable. Use the presentational selector when the axes and selected state are already settled outside the SDK.