Skip to main content

shopify-variant-selector
component

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 selectedOrFirstAvailableVariant will automatically update when a variant is selected.

See the playground for more complete examples.

string

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.

Was this section helpful?

The color swatch element.

Anchor to color-swatch-disabled
color-swatch-disabled

A part for the color swatch it is unavailable for sale.

The color swatch label element.

Anchor to color-swatch-selected
color-swatch-selected

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.

Was this section helpful?

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>

Customize the variant selector using CSS parts. CSS parts let you target and override the default styling within the variant-selector component.

Anchor to example-use-css-parts-to-customize-the-variant-selectorUse CSS parts to customize the variant selector
Was this section helpful?

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>