Skip to main content

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

See the playground for more complete examples.

Anchor to attributesAttributes

Anchor to visible-option
visible-option
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.

Anchor to css partsCSS Parts

Anchor to color-swatch
color-swatch

The color swatch element.

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

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

Anchor to color-swatch-label
color-swatch-label

The color swatch label element.

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

A part for the color swatch when it is selected.

Anchor to form
form

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 label
label

The label element for each option group.

Anchor to radio
radio

The radio option element.

Anchor to radio-disabled
radio-disabled

A part for the radio option when it is unavailable for sale.

Anchor to radio-selected
radio-selected

The radio selected element.

Anchor to select
select

The select element.

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>

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.

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>
Was this page helpful?