---
title: 'shopify:product:view'
description: Fires when a product comes into view.
source_url:
  html: >-
    https://shopify.dev/docs/api/storefront-events-and-actions/events/product-view
  md: >-
    https://shopify.dev/docs/api/storefront-events-and-actions/events/product-view.md
api_name: storefront-events-and-actions
---

# shopify:product:view

Fires when a product becomes visible to a buyer, whether that's a product page, a card in a collection grid, or a recommendation. The `context` field tells you which, with `page`, `collection`, `recommendation`, `search`, or `dialog`.

You can use this to record what a buyer saw. Because it covers cards as well as full pages, one listener captures every product a buyer saw, including cards they never clicked.

A view-event custom element dispatches it, so a storefront wires it up in Liquid rather than in JavaScript. Add `view-event-trigger="intersect"` to fire when the card scrolls into view rather than when it's added to the page. See [dispatching view events](https://shopify.dev/docs/api/storefront-events-and-actions/events/dispatch).

`selectedVariant` is `null` when no variant is selected, such as a product card in a collection grid.

#### Properties

* **context**

  **'page' | 'search' | 'collection' | 'dialog' | 'recommendation'**

  **required**

  Where the buyer saw the product. Use this to tell a product page view apart from a card in a grid.

* **selected​Options**

  **SelectedOption\[]**

  **required**

  The options selected when the product came into view.

* **product**

  **ProductViewProduct**

  **required**

  The product the buyer saw.

* **detail**

  **Record\<string, unknown>**

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

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

### ProductViewProduct

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

* id

  The product GID.

  ```ts
  string
  ```

* title

  The product title.

  ```ts
  string
  ```

* handle

  The product handle.

  ```ts
  string
  ```

* selectedVariant

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

  ```ts
  ProductVariant | null
  ```

### 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

* ####

  ##### Wrap the product in Liquid

  ```liquid
  <s-view-event
    view-event-trigger="intersect"
    view-event-payload='{{ product | standard_event_data: "view", context: "collection" | escape }}'
  >
    {% render 'product-card', product: product %}
  </s-view-event>
  ```

* ####

  ##### Listen for the event

  ```javascript
  document.addEventListener('shopify:product:view', (event) => {
    recordImpression({
      id: event.product.id,
      context: event.context,
      price: event.product.selectedVariant?.price.amount,
    });
  });
  ```

***