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 with a null variant rather than rejecting. A failed lookup rejects the promise.

Anchor to propertiesProperties

Anchor to product product required: The product whose options changed.
Anchor to selectedOptions selectedOptions [] required: The options after the change. Contains at least one entry.
Anchor to promise promise Promise<> required: Resolves with the matching variant once the storefront has looked it up.
Anchor to detail 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.
```
string
```
title
The product title.
```
string
```
handle
The product handle.
```
string
```

SelectedOption

A chosen value for one product option.

name
The option name, such as `Size`.
```
string
```
value
The chosen value, such as `Large`.
```
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.
```
ProductVariant | null
```
detail
Optional custom data for the storefront's internal use. Listeners can read it.
```
Record<string, unknown>
```

ProductVariant

A single purchasable variant of a product.

id
The variant GID.
```
string
```
title
The variant title, such as `Large / Blue`.
```
string
```
availableForSale
Whether the variant can be purchased right now.
```
boolean
```
price
The variant price.
```
MoneyV2
```
selectedOptions
The options that identify this variant.
```
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`.
```
string
```
currencyCode
The three-letter currency code, such as `USD`.
```
string
```

Examples

Dispatch the event

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) });

Examples

Dispatch the event

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

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

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

Was this page helpful?