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.
selectedVariant is null when no variant is selected, such as a product card in a collection grid.
Anchor to propertiesProperties
- Anchor to contextcontextcontext'page' | 'search' | 'collection' | 'dialog' | 'recommendation''page' | 'search' | 'collection' | 'dialog' | 'recommendation'requiredrequired
Where the buyer saw the product. Use this to tell a product page view apart from a card in a grid.
- Anchor to selectedOptionsselected
Optionsselected Options SelectedOption[]SelectedOption[]requiredrequired The options selected when the product came into view.
- Anchor to productproductproductProductViewProductProductViewProductrequiredrequired
The product the buyer saw.
- Anchor to detaildetaildetailRecord<string, unknown>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`.
string - value
The chosen value, such as `Large`.
string
ProductViewProduct
A product in a `shopify:product:view` event.
- id
The product GID.
string - title
The product title.
string - handle
The product handle.
string - selectedVariant
The variant matching the selected options, or `null` when no variant is selected.
ProductVariant | null
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