> For the complete documentation index, see [llms.txt](https://docs.smind.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.smind.io/dev/product-detail-event.md).
# Product detail event
* Selecting variant from variant picker of Smind
This event is fired whenever a user has changed the variant in a product selector, either in a product page, featured product section or quick view and quick add section
Event
Detail
variant:change
detail: {variant}
\
variant: Is an object variant of Shopify ()
The "change variant" event will be listened to by other components to update related elements such as product price, inventory status, SKU, add to cart button, and checkout.
Example usage:
```
document.addEventListener('variant:change', ({ detail: event }) => {
try{
const variant = event.variant;
const variantId = event.variant?.id;
console.log(variant);
console.log(variantId);
} catch (error) {
console.log('error: ', error)
}
});
```
* Changing the product variant without using Smind’s variant picker.
If you're replacing the variant selection using Smind’s variant picker with a third-party solution, please make sure to dispatch an event after selecting a variant so that other components can listen for the variant change.
The variant change event must be named **"variant:change"** and must include a **variant object** with the same structure as Shopify's default variant object. ()
Example usage:
```
container.dispatchEvent(new CustomEvent("variant:change", {
detail: {
variant
},
bubbles: true
}));
```
container
The section container that includes the variant picker