shopify-variant-selector
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
- Anchor to visible-optionvisible-optionvisible-optionstringstring
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
- Anchor to color-swatchcolor-swatchcolor-swatchCSSPartCSSPart
The color swatch element.
- Anchor to color-swatch-disabledcolor-swatch-disabledcolor-swatch-disabledCSSPartCSSPart
A part for the color swatch it is unavailable for sale.
- Anchor to color-swatch-labelcolor-swatch-labelcolor-swatch-labelCSSPartCSSPart
The color swatch label element.
- Anchor to color-swatch-selectedcolor-swatch-selectedcolor-swatch-selectedCSSPartCSSPart
A part for the color swatch when it is selected.
- Anchor to formformformCSSPartCSSPart
The form element. This element has a flex layout, so targeting the form element allows you to control the layout of the variant selector.
- Anchor to labellabellabelCSSPartCSSPart
The label element for each option group.
- Anchor to radioradioradioCSSPartCSSPart
The radio option element.
- Anchor to radio-disabledradio-disabledradio-disabledCSSPartCSSPart
A part for the radio option when it is unavailable for sale.
- Anchor to radio-selectedradio-selectedradio-selectedCSSPartCSSPart
The radio selected element.
- Anchor to selectselectselectCSSPartCSSPart
The select element.
CSSPart
A [`::part` CSS pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) allowing you to target and override the default styling within the component.
stringHTML
Examples
example
Description
This is the default example
HTML
<shopify-store store-domain="https://your-store.myshopify.com" > </shopify-store> <!-- The context is bound to the store --> <shopify-context type="product" handle="handle-of-product" > <template> <shopify-variant-selector></shopify-variant-selector> <!-- Fields on `selectedOrFirstAvailableVariant` automatically update when a variant is selected --> <shopify-money query="product.selectedOrFirstAvailableVariant.price" ></shopify-money> <shopify-media query="product.selectedOrFirstAvailableVariant.image" width="200" height="200" ></shopify-media> </template> </shopify-context>Use CSS parts to customize the variant selector
HTML
<shopify-store store-domain="https://your-store.myshopify.com" > </shopify-store> <!-- The context is bound to the store --> <shopify-context type="product" handle="handle-of-product" > <template> <shopify-variant-selector> </shopify-variant-selector> </template> </shopify-context> <style> shopify-variant-selector::part(form) { /** Change the layout of the variant selector */ flex-direction: row; gap: 10px; } shopify-variant-selector::part(label) { /** Change the label of the variant selector */ font-weight: bold; } </style>