# smootify:variant_changed

> a product's variant changed after its first render (`element` is the product on the page)

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/api/events/variant-changed  
Updated: 2026-10-13

a product’s variant changed after its first render (`element` is the product on the page) New in 2.0.

## Listen

```js
window.Smootify = window.Smootify || [];
window.Smootify.push((api) => {
  api.on("variant_changed", (payload) => {
    // …
  });
});
```

## Payload

```ts
{ element: HTMLElement; product: Product; variant: ProductVariant | undefined }
```

### ProductVariant

```ts
export interface ProductVariant {
  /** `gid://shopify/ProductVariant/<id>` */
  id: string;
  title: string;
  sku: string | null;
  barcode: string | null;
  availableForSale: boolean;
  currentlyNotInStock: boolean;
  quantityAvailable: number | null;
  weight: number | null;
  weightUnit: string;
  price: Money;
  compareAtPrice: Money | null;
  unitPrice: Money | null;
  quantityRule: QuantityRule;
  image: { id: string | null; url: string; altText: string | null } | null;
  selectedOptions: SelectedOption[];
  sellingPlanAllocations: { nodes: { sellingPlan: { id: string } }[] };
  metafields: (Metafield | null)[];
}
```

### Product

```ts
export interface Product {
  /** `gid://shopify/Product/<id>` */
  id: string;
  title: string;
  handle: string;
  vendor: string;
  productType: string;
  descriptionHtml: string;
  tags: string[];
  isGiftCard: boolean;
  requiresSellingPlan: boolean;
  totalInventory: number | null;
  category: { name: string } | null;
  publishedAt: string;
  createdAt: string;
  metafields: (Metafield | null)[];
  collections: { nodes: { handle: string; title: string; image: { url: string } | null }[] };
  media: { nodes: ProductMedia[] };
  options: ProductOption[];
  sellingPlanGroups: { nodes: SellingPlanGroup[] };
  /** every variant on the product page; the first 250 elsewhere */
  variants: { nodes: ProductVariant[]; pageInfo: { hasNextPage: boolean; endCursor: string | null } };
}
```