---
title: 'shopify:product:select'
description: Fires when a buyer changes product options.
source_url:
  html: >-
    https://shopify.dev/docs/api/storefront-events-and-actions/events/product-select
  md: >-
    https://shopify.dev/docs/api/storefront-events-and-actions/events/product-select.md
api_name: storefront-events-and-actions
---

# shopify:product:select

Fires when a buyer changes a product option, such as picking a different size or color.

This follows a buyer through the option picker, before the buyer adds anything to the cart. The resolved variant carries the price and availability the buyer is now looking at.

The event carries the options the buyer chose. The promise resolves with the variant those options map to, because the storefront looks that up after the change.

You dispatch it from the product element that holds the option picker. A selection with no matching variant [resolves](https://shopify.dev/docs/api/storefront-events-and-actions/events/listen#waiting-for-the-result) with a `null` variant rather than rejecting. A failed lookup rejects the promise.

#### Properties

* **product**

  **ProductSelectProduct**

  **required**

  The product whose options changed.

* **selected​Options**

  **SelectedOption\[]**

  **required**

  The options after the change. Contains at least one entry.

* **promise**

  **Promise\<ProductSelectResult>**

  **required**

  Resolves with the matching variant once the storefront has looked it up.

* **detail**

  **Record\<string, unknown>**

  Optional custom data for the storefront's internal use. Listeners can read it.

### ProductSelectProduct

A product in a \`shopify:product:select\` event.

* id

  The product GID.

  ```ts
  string
  ```

* title

  The product title.

  ```ts
  string
  ```

* handle

  The product handle.

  ```ts
  string
  ```

### SelectedOption

A chosen value for one product option.

* name

  The option name, such as \`Size\`.

  ```ts
  string
  ```

* value

  The chosen value, such as \`Large\`.

  ```ts
  string
  ```

### ProductSelectResult

The value a \`shopify:product:select\` promise resolves with.

* variant

  The variant matching the selected options, or \`null\` when no variant matches the selection.

  ```ts
  ProductVariant | null
  ```

* detail

  Optional custom data for the storefront's internal use. Listeners can read it.

  ```ts
  Record<string, unknown>
  ```

### ProductVariant

A single purchasable variant of a product.

* id

  The variant GID.

  ```ts
  string
  ```

* title

  The variant title, such as \`Large / Blue\`.

  ```ts
  string
  ```

* availableForSale

  Whether the variant can be purchased right now.

  ```ts
  boolean
  ```

* price

  The variant price.

  ```ts
  MoneyV2
  ```

* selectedOptions

  The options that identify this variant.

  ```ts
  SelectedOption[]
  ```

### MoneyV2

An amount with its currency, matching the Storefront API \[\`MoneyV2\`]\(/docs/api/storefront/latest/objects/MoneyV2) format.

* amount

  A decimal money amount, such as \`29.99\`.

  ```ts
  string
  ```

* currencyCode

  The three-letter currency code, such as \`USD\`.

  ```ts
  string
  ```

Examples

### Examples

* ####

  ##### Dispatch the event

  ```javascript
  import { ProductSelectEvent } from '@shopify/standard-events';

  const deferred = ProductSelectEvent.createPromise();

  element.dispatchEvent(
    new ProductSelectEvent({
      product: { id: productId, title, handle },
      selectedOptions: [{ name: 'Size', value: 'Large' }],
      promise: deferred.promise,
    }),
  );

  deferred.resolve({ variant: await lookupVariant(selectedOptions) });
  ```

* ####

  ##### Listen for the event

  ```javascript
  document.addEventListener('shopify:product:select', (event) => {
    event.promise.then(({ variant }) => {
      if (!variant) {
        showMessage('That combination is unavailable.');
        return;
      }

      updatePrice(variant.price, variant.availableForSale);
    });
  });
  ```

***