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.

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.

VariantSelectorAttributes

visible-option
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.
```
string
```

interface VariantSelectorAttributes {
  /**
   * 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.
   */
  "visible-option"?: string;
}

Was this section helpful?

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.

VariantSelectorParts

color-swatch
The color swatch element.
```
CSSPart
```
color-swatch-disabled
A part for the color swatch it is unavailable for sale.
```
CSSPart
```
color-swatch-label
The color swatch label element.
```
CSSPart
```
color-swatch-selected
A part for the color swatch when it is selected.
```
CSSPart
```
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.
```
CSSPart
```
label
The label element for each option group.
```
CSSPart
```
radio
The radio option element.
```
CSSPart
```
radio-disabled
A part for the radio option when it is unavailable for sale.
```
CSSPart
```
radio-selected
The radio selected element.
```
CSSPart
```
select
The select element.
```
CSSPart
```

interface VariantSelectorParts {
  /** The form element. This element has a flex layout, so targeting the form element allows you to control the layout of the variant selector. */
  form?: CSSPart;

  /** The label element for each option group. */
  label?: CSSPart;

  /** The color swatch label element. */
  "color-swatch-label"?: CSSPart;

  /** The radio option element. */
  radio?: CSSPart;

  /** The radio selected element. */
  "radio-selected"?: CSSPart;

  /** The select element. */
  select?: CSSPart;

  /** The color swatch element. */
  "color-swatch"?: CSSPart;

  /** A part for the color swatch when it is selected. */
  "color-swatch-selected"?: CSSPart;

  /** A part for the color swatch it is unavailable for sale. */
  "color-swatch-disabled"?: CSSPart;

  /** A part for the radio option when it is unavailable for sale. */
  "radio-disabled"?: CSSPart;
}

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.

string

Was this section helpful?

Example

HTML

<shopify-store

store-domain="https://your-store.myshopify.com"

</shopify-store>

<shopify-context

type="product"

handle="handle-of-product"

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

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>

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>

<shopify-context

type="product"

handle="handle-of-product"

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

examples

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>

shopify-variant-selectorcomponent

Anchor to attributesAttributes

VariantSelectorAttributes

Anchor to css partsCSS Parts

VariantSelectorParts

CSSPart

examples

example

description

HTML

Anchor to examplesExamples

examples

Use CSS parts to customize the variant selector

HTML

shopify-variant-selector
component