# Shopify Storefront Components API Documentation

## Table of Contents

- [Attributes](#attributes)
  - [shopify-attr](#shopify-attr)
- [Components](#components)
  - [shopify-cart](#shopify-cart)
  - [shopify-context](#shopify-context)
  - [shopify-list-context](#shopify-list-context)
  - [shopify-data](#shopify-data)
  - [shopify-media](#shopify-media)
  - [shopify-money](#shopify-money)
  - [shopify-store](#shopify-store)
  - [shopify-variant-selector](#shopify-variant-selector)

## Attributes

### shopify-attr

**Description**: Use the `shopify-attr` attribute to bind an attribute to data from Shopify. Anywhere within the template of a [shopify-context component](#shopify-context), you can use the `shopify-attr--attribute-name` attribute to bind an attribute to data from Shopify. For example, `shopify-attr--href="product.onlineStoreUrl"` can be used to bind the `href` attribute to the `onlineStoreUrl` field on a product context.

See the [playground](https://webcomponents.shopify.dev/playground) for more complete examples.

**Example**:

```html
<shopify-store
  store-domain="https://your-store.myshopify.com"
  country="CA"
  language="FR"
>
</shopify-store>
<shopify-context type="product" handle="your-product-handle">
  <template>
    <!-- the href attribute is bound to the
      product.onlineStoreUrl field -->
    <a shopify-attr--href="product.onlineStoreUrl"> View product </a>
  </template>
</shopify-context>
```

## Components

### shopify-cart

**Description**: The cart component provides a mini shopping cart functionality for your website. Here's how it works:

1. To add items to the cart:

   - Use the `addLine()` method
   - The method needs an event object
   - The event's target must be inside a product [context component](#shopify-context)

2. To display the cart:

   - The cart uses a native [HTML `<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog).
   - To show it as a popup modal, call the `showModal()` method.

3. Customize the cart with CSS parts and slots.

> Note:
> The cart component does not support mixing products from multiple stores.

**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>
    <!-- The product added will be whatever
  variant is selected for the context product handle -->
    <button onclick="getElementById('cart').addLine(event).showModal();">
      Add to cart
    </button>
  </template>
</shopify-context>

<shopify-cart id="cart"></shopify-cart>
```

#### Attributes and properties

| Name      | Type                         | Description                                                                                                                                               | Optional |
| --------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| addLine   | (e: Event) => CartAttributes | A method to add an item to the cart.                                                                                                                      | Yes      |
| close     | () => CartAttributes         | A method to close the cart dialog.                                                                                                                        | Yes      |
| open      | boolean                      | A property to get the open state of the cart. Example: `getElementById('cart').open`                                                                      | Yes      |
| show      | () => CartAttributes         | A method to display the cart as a modal in a [`dialog` element modelessly](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show).      | Yes      |
| showModal | () => CartAttributes         | A method to display the underlying [cart as a modal](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) in a `dialog` element. | Yes      |
| target    | string                       | The [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target) for the checkout link. Defaults to "\_top".                    | Yes      |

#### CSS parts

CSS parts allow you to target and override the default styling within the cart component.

| Part Name        | Description                                                                           |
| ---------------- | ------------------------------------------------------------------------------------- |
| dialog           | The dialog element.                                                                   |
| line-heading     | The cart line-item title element.                                                     |
| line-image       | The cart line-item image element.                                                     |
| line-options     | The cart line-item options element.                                                   |
| line-price       | The cart line-item quantity element.                                                  |
| primary-button   | The primary button element. Used to style the checkout link.                          |
| secondary-button | The secondary button element. Used to style the buttons that modify a cart-line item. |

#### Slots

Slots allow you to override the default content of the cart component.

| Slot Name       | Description                                                                                                        |
| --------------- | ------------------------------------------------------------------------------------------------------------------ |
| checkout-button | The content to display in the checkout button. Useful to add a custom checkout button text.                        |
| empty           | The content to display when the cart is empty.                                                                     |
| extension       | Extend the cart with additional content below the checkout button. Useful to add upsell products or other content. |

**Custom Cart Example**:

```html
<shopify-cart>
  <!-- Override the empty state with translated text -->
  <div slot="empty">Ihr Warenkorb ist leer</div>
  <!-- Override the checkout button with translated text -->
  <div slot="checkout-button">Zur Kasse</div>
</shopify-cart>

<style>
  shopify-cart::part(dialog) {
    border-radius: 0.5rem;
  }
  shopify-cart::part(primary-button) {
    background-color: #627059;
    border: 0;
    border-radius: 0;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
  }
  shopify-cart::part(secondary-button) {
    background-color: #ffffff;
    color: #000;
    fill: #000;
    border: 2px solid #000;
    border-radius: 0;
  }
</style>
```

### shopify-context

**Description**: The context component defines which Shopify data should be available in different parts of your page.

Each `<shopify-context>` component requires two attributes:

- `type`: Specifies what kind of data you want (for example, `product`).
- `handle`: Identifies the specific item. For example, the handle for the URL [`demostore.mock.shop/products/men-t-shirt`](https://demostore.mock.shop/products/men-t-shirt) is `men-t-shirt`.

If you're working with a single storefront, then you can add the `<shopify-context>` component anywhere on your page (it doesn't need to be inside the `<shopify-store>` component). If you're working with multiple storefronts, then nest the context inside its corresponding store component.

Every `<shopify-context>` component also requires a `<template>` component, which contains the data you want to display. That template won't be rendered until the context is loaded. Render placeholder content outside the template with an attribute `shopify-loading-placeholder`. This content will be displayed until the context is loaded.

See the [playground](https://webcomponents.shopify.dev/playground) for complete examples.

**Related**: [shopify-list-context](#shopify-list-context)

**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>
    <!-- The data component is bound to the product
     context and queries the title field -->
    <h1>
      <shopify-data query="product.title"></shopify-data>
    </h1>
  </template>
  <!-- Render placeholder content
   until the context is loaded -->
  <div shopify-loading-placeholder>Loading...</div>
</shopify-context>
```

#### Attributes

| Name            | Type               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Optional |
| --------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| handle          | string             | The handle for the context. Required on some objects, like products, collections, and blogs. The handle is required unless the `wait-for-update` attribute is included.                                                                                                                                                                                                                                                                                                                                                                 | Yes      |
| query           | string             | The query path for accessing nested data within a parent context. Required when this context is nested inside another context. The query should specify the path to access the desired data from the parent. Example: If the parent context is a product, and you want to access its first available variant: query="product.selectedOrFirstAvailableVariant"                                                                                                                                                                           | Yes      |
| type            | string             | The type of the context. This needs to match the [GraphQL Storefront API](https://shopify.dev/docs/api/storefront) type you are querying. For example, if you are querying a product, the type should be `type="product"`.                                                                                                                                                                                                                                                                                                              | No       |
| update          | (e: Event) => void | Updates this context to match the data from another context of the same type. Common use case: When displaying a list of products, you might want to show a detailed view of a single product in a modal. This method allows you to update the modal's context to display the selected product's data. How it works: 1. The event target must be inside the source context you want to copy from 2. This context will update its handle to match the source context 3. The data will be automatically refreshed to show the new content | Yes      |
| wait-for-update | boolean            | Wait to render the context until the update method is called. This is useful for dynamically rendering a context.                                                                                                                                                                                                                                                                                                                                                                                                                       | Yes      |

**Example - Updating a context with a dialog**:

```html
<shopify-store
  store-domain="https://your-store.myshopify.com"
  country="CA"
  language="FR"
>
</shopify-store>

<script>
  function showProductDetails(event) {
    // Update a dialog context with a selected product
    document.getElementById("dialog-context").update(event);

    // Show the dialog
    document.getElementById("dialog").showModal();
  }
</script>

<shopify-list-context type="product" query="products" first="10">
  <!-- This template is repeated for each product-->
  <template>
    <button onclick="showProductDetails(event)">
      <shopify-data query="product.title"></shopify-data>
    </button>
  </template>
</shopify-list-context>

<dialog id="dialog">
  <shopify-context id="dialog-context" type="product" wait-for-update>
    <template>
      <div>
        <shopify-data query="product.description"></shopify-data>
      </div>
    </template>
    <div shopify-loading-placeholder>Loading...</div>
  </shopify-context>
</dialog>
```

**Example - Paginated list of products**:

```html
<shopify-store
  store-domain="https://your-store.myshopify.com"
  country="CA"
  language="FR"
>
</shopify-store>

<shopify-list-context type="product" query="products" first="10">
  <!-- This template is repeated for each product-->
  <template>
    <shopify-data query="product.title"></shopify-data>
  </template>
</shopify-list-context>
<button id="previous" onclick="getElementById('list-context').previousPage();">
  Previous
</button>
<button id="next" onclick="getElementById('list-context').nextPage();">
  Next
</button>

<script>
  // Listen for the list context to update
  // and disable the next and previous buttons when
  // the list is at the end or beginning
  document
    .querySelector("shopify-context")
    .addEventListener("shopify-list-context-update", (event) => {
      const { hasNextPage, hasPreviousPage } = event.detail;
      if (!hasNextPage) {
        document.getElementById("next").setAttribute("disabled", "true");
      } else {
        document.getElementById("next").removeAttribute("disabled");
      }
      if (!hasPreviousPage) {
        document.getElementById("previous")?.setAttribute("disabled", "true");
      } else {
        document.getElementById("previous").removeAttribute("disabled");
      }
    });
</script>
```

### shopify-list-context

**Description**: The list context component allows you to display multiple items in a repeating format. To use it, you need three key attributes:

1. `type`: Defines what you're listing (such as 'product' or 'collection')
2. `query`: Specifies which data fields you want to display
3. `first`: Sets the number of items to show in the list

Inside the list context, a template component defines how each item should appear. This template will automatically repeat for each item in your list. When you reference data within the template (using shopify-data or other components), it will automatically pull from the current item being displayed.

> Note:
> The list context can be nested inside a context component or other list context components.

See the [playground](https://webcomponents.shopify.dev/playground) for examples.

**Related**: [shopify-context](#shopify-context)

**Example**:

```html
<shopify-store store-domain="https://your-store.myshopify.com"> </shopify-store>

<!-- The context is bound to the store -->
<shopify-list-context type="product" query="products" first="10">
  <!-- The template is repeated for each item
    in the array -->
  <template>
    <h2>
      <shopify-data query="product.title"></shopify-data>
    </h2>
  </template>
</shopify-list-context>
```

#### Attributes

| Name         | Type       | Description                                                                                                                                                                                                                                                                  | Optional |
| ------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| first        | number     | The number of items to return.                                                                                                                                                                                                                                               | No       |
| nextPage     | () => void | Load the next page of items in the list.                                                                                                                                                                                                                                     | Yes      |
| previousPage | () => void | Load the previous page of items in the list.                                                                                                                                                                                                                                 | Yes      |
| query        | string     | Defines where the list exists, either at the root or relative to a parent context. For example: 1. At the root, query a list of all products, `query="products"` 2. Within a parent collection context, query the products on that collection, `query="collection.products"` | No       |
| reverse      | () => void | Reverse the order of the items in the list.                                                                                                                                                                                                                                  | Yes      |
| type         | string     | The type of the context. This needs to match the [GraphQL Storefront API](https://shopify.dev/docs/api/storefront) type you are querying. For example, if you are querying a product, the type should be `type="product"`.                                                   | No       |

### shopify-data

**Description**: The shopify-data component is used to display Shopify data on your page. Here's how it works:

- It requires a `query` attribute that specifies which data to display.
- The query uses dot notation to access data fields (for example, `query="product.title"`).
- It looks for the nearest matching context to find the data.
- It outputs plain text that you can style with your own HTML elements.

For example:
`<shopify-data query="product.title">` will:

1. Find the nearest product context.
2. Access its title property.
3. Display the result as text.

Since the component outputs a text node, you can wrap it in any HTML elements to match your site's design. The component also supports rich text fields like `product.descriptionHtml`.

See the [playground](https://webcomponents.shopify.dev/playground) for more complete examples.

**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>
    <h1>
      <!-- Query the title of the product.
        Renders a text node with display: contents  -->
      <shopify-data query="product.title"></shopify-data>
    </h1>
  </template>
</shopify-context>
```

#### Attributes

| Name  | Type   | Description                                                                                                                            | Optional |
| ----- | ------ | -------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| query | string | Defines the context to reference and field to query. For example `query="product.title"` would query the title of the product context. | No       |

### shopify-media

**Description**: Accepts a reference to an [Image](https://shopify.dev/docs/api/storefront/latest/objects/Image) or [Media](https://shopify.dev/docs/api/storefront/latest/interfaces/Media) reference and generates an image or video element with `srcset` and `sizes` attributes. This component must be a child of a `shopify-context` component. It takes a query attribute that defines the context it's a part of, and the field to query.

If you want the media to automatically change based on which variant is selected on the [variant-selector component](#shopify-variant-selector), make sure to reference the product image on the `product.selectedOrFirstAvailableVariant.image` field.

See the [playground](https://webcomponents.shopify.dev/playground) for more complete examples.

> Note:
> When rendering an image, the media component uses the [`unpic-img`](https://unpic.pics/img/lit/) element internally, so you can also pass `height`, `width`, `layout`, `aspect-ratio`, `priority`, `breakpoints`, and `sizes` attributes to control the scale and size of the image. Learn more about image props in the [Unpic documentation](https://unpic.pics/img/lit/#image-props).

**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>
    <h1>
      <!-- Query the featured image of the product.
        Renders an image element  -->
      <shopify-media
        width="200"
        height="300"
        query="product.featuredImage"
      ></shopify-media>
    </h1>
  </template>
</shopify-context>
```

#### Attributes

| Name              | Type                                    | Description                                                                                                                                                                                                                                                                                                       | Optional |
| ----------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| aspectRatio       | number                                  | Instead of providing a width and height, you can provide an aspect ratio. This is passed to the [`aspectRatio`](https://unpic.pics/img/webc/#aspect-ratio) attribute of an underlying `unpic-img` element.                                                                                                        | No       |
| breakpoints       | string                                  | The breakpoints of the image. This is passed to the [breakpoints](https://unpic.pics/img/webc/#breakpoints) attribute of an underlying `unpic-img` element.                                                                                                                                                       | Yes      |
| height            | number                                  | The height of the image. Required, unless width is provided with an aspectRatio.                                                                                                                                                                                                                                  | No       |
| layout            | "fixed" \| "constrained" \| "fullWidth" | The resizing behavior of the image. This is passed to the [layout](https://unpic.pics/img/webc/#layout) attribute of an underlying `unpic-img` element.                                                                                                                                                           | Yes      |
| priority          | boolean                                 | Whether to prioritize the image. This is passed to the [priority](https://unpic.pics/img/webc/#priority) attribute of an underlying `unpic-img` element.                                                                                                                                                          | Yes      |
| query             | string                                  | Defines the context to reference and field to query. For example, `query="product.featuredImage"` queries the title of the product featured image, and `query="product.selectedOrFirstAvailableVariant.image"` queries the image of a specific product variant based on the `shopify-variant-selector` component. | No       |
| role              | string \| null                          | The accessibility role of the image. This is set automatically by the media component, but you can override it if needed.                                                                                                                                                                                         | Yes      |
| sizes             | string                                  | The sizes of the image. This is set automatically by the media component, but you can override it if needed.                                                                                                                                                                                                      | Yes      |
| video-autoplay    | boolean                                 | Used for video media. By default, videos [autoplay](https://developer.mozilla.org/docs/Web/HTML/Element/video#autoplay). To disable autoplay, set to `video-autoplay="false"`.                                                                                                                                    | Yes      |
| video-controls    | boolean                                 | Used for video media. By default, [video controls](https://developer.mozilla.org/docs/Web/HTML/Element/video#controls) are shown. To disable them, set to `video-controls="false"`.                                                                                                                               | Yes      |
| video-loop        | boolean                                 | Used for video media. By default, videos [loop](https://developer.mozilla.org//docs/Web/HTML/Element/video#loop). To disable looping, set to `video-loop="false"`.                                                                                                                                                | Yes      |
| video-muted       | boolean                                 | Used for video media. By default, videos are [muted](https://developer.mozilla.org/docs/Web/HTML/Element/video#muted). To enable audio, set to `video-muted="false"`.                                                                                                                                             | Yes      |
| video-playsinline | boolean                                 | Used for video media. By default, videos [play inline](https://developer.mozilla.org/docs/Web/HTML/Element/video#playsinline). To disable inline playback, set to `video-playsinline="false"`.                                                                                                                    | Yes      |
| width             | number                                  | The width of the image. Required, unless height is provided with an aspectRatio.                                                                                                                                                                                                                                  | No       |

### shopify-money

**Description**: Accepts query a reference to a [Money object](https://shopify.dev/docs/api/storefront/2024-04/objects/MoneyV2), and uses the store's country and language market to format it correctly. This component must be a child of a [`shopify-context`](#shopify-context) component. The component takes a query attribute that defines the context it's a part of, and the field to query. This component produces a text node with the formatted price.

Usually you want a product price to update based on the selected variant, so make sure to reference the `product.selectedOrFirstAvailableVariant.price` field if you are using the [shopify-variant-selector](#shopify-variant-selector) component.

See the [playground](https://webcomponents.shopify.dev/playground) for more complete examples.

**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>
    <h1>
      <!-- Query the selected or first available variant's
price. Renders a text node with the formatted price. -->
      <shopify-money
        format="money_with_currency"
        query="product.selectedOrFirstAvailableVariant.price"
      ></shopify-money>
    </h1>
  </template>
</shopify-context>
```

#### Attributes

| Name   | Type                                                         | Description                                                                                                                                                                                                                                                                                                                                                     | Optional |
| ------ | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| format | "money" \| "money_without_currency" \| "money_with_currency" | The format of the price. Defaults to `money`. Options: `money` - Display the price in the store's currency. eg. `$100.00`; `money_without_currency` - Display the price in the store's currency, without the currency symbol. eg. `100.00`; `money_with_currency` - Display the price in the store's currency, including the currency symbol. eg. `$100.00 USD` | Yes      |
| query  | string                                                       | Defines the context to reference and field to query. For example `query="product.title"` would query the title of the product context.                                                                                                                                                                                                                          | No       |

### shopify-store

**Description**: Use the `<shopify-store>` component to set up your credentials and market configuration for a storefront. You can optionally add a public access token, which gives you access to inventory, metafields, and metaobjects. You can get a public access token by adding the [Headless channel](/docs/storefronts/headless/building-with-the-storefront-api/manage-headless-channels) in your Shopify admin.

See the [playground](https://webcomponents.shopify.dev/playground) for more complete examples.

**Example**:

```html
<!-- Optionally define market configuration, which defaults
 to US/EN. The public-access-token attribute is optional,
 and only necessary to access inventory, metafields,
 and metaobjects.
-->
<shopify-store
  store-domain="https://your-store.myshopify.com"
  public-access-token="optional-access-token"
  country="CA"
  language="FR"
>
</shopify-store>

<!-- The context is bound to the store -->
<shopify-context type="product" handle="handle-of-product">
  <template> ... </template>
</shopify-context>

<!-- If you want to display products from multiple
  storefronts on the same page, nest contexts inside
  multiple store components-->
<shopify-store
  store-domain="https://your-other-store.myshopify.com"
  country="CA"
  language="FR"
>
  <shopify-context type="product" handle="handle-of-product">
    <template> ... </template>
  </shopify-context>
</shopify-store>
```

#### Attributes

| Name                | Type                               | Description                                                                                                                                              | Optional |
| ------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| buyNow              | (e: Event, target: Target) => void | A method to open the checkout page with a selected product.                                                                                              | Yes      |
| country             | CountryCode                        | The country of the store.                                                                                                                                | Yes      |
| language            | LanguageCode                       | The language of the store.                                                                                                                               | Yes      |
| public-access-token | string                             | The public access token from the [Headless channel](/docs/storefronts/headless/building-with-the-storefront-api/manage-headless-channels) for the store. | Yes      |
| store-domain        | string                             | The myshopify.com domain of the store.                                                                                                                   | No       |

### shopify-variant-selector

**Description**: 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](https://webcomponents.shopify.dev/playground) for more complete examples.

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

#### Attributes

| Name           | Type   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Optional |
| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| 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. | Yes      |

#### CSS Parts

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

**Custom Variant Selector 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>
  </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>
```