shopify-variant-selectorcomponent
Use the <shopify-variant-selector>
component to display a form for selecting product options. The variant selector must be a child of a product context. Any data, money, or media component that references will automatically update when a variant is selected.
See the playground for more complete examples.
Anchor to attributesAttributes
Only show a single option. Default all options are visible. This allows you to have multiple variant selectors, each rendering a single option, and arrange them as you like.
Additionally, when calling context.update(event)
, the selected options in the current context will be applied to the variant selector in the destination context. This allows you to have a card with only one option visible, and a modal where all options are visible, and the selected options in the card will be applied to the modal.
Anchor to css partsCSS Parts
The color swatch element.
A part for the color swatch it is unavailable for sale.
The color swatch label element.
A part for the color swatch when it is selected.
The form element. This element has a flex layout, so targeting the form element allows you to control the layout of the variant selector.
The label element for each option group.
The radio option element.
A part for the radio option when it is unavailable for sale.
The radio selected element.
The select element.
Example
HTML
Anchor to examplesExamples
Customize the variant selector using CSS parts. CSS parts let you target and override the default styling within the variant-selector
component.