shopify:collection:view

Fires when a buyer opens a collection page.

You can use this to know which collection a buyer is browsing, and how many products are in it. The product count comes with the event, so you can tell a full collection from an empty one without a follow-up request.

A view-event custom element dispatches it, so a storefront wires it up in Liquid rather than in JavaScript. See dispatching view events.

Built-in collections with no collection record behind them, such as the all-products collection, have a null id. Their handle is still set.

Anchor to propertiesProperties

Anchor to collection collection required: The collection the buyer landed on.
Anchor to detail detail Record<string, unknown>: Optional custom data for the storefront's internal use. Listeners can read it.

StandardEventCollection

A collection on the storefront.

id
The collection GID. This is `null` for built-in collections with no collection record, such as the all-products collection.
```
string | null
```
handle
The collection handle, such as `summer-sale`.
```
string
```
productsCount
How many products the collection currently contains.
```
number
```

Examples

Wrap the collection in Liquid

<s-view-event view-event-payload='{{ collection | standard_event_data: "view" | escape }}'>

{% render 'collection-header', collection: collection %}

</s-view-event>

Examples

Wrap the collection in Liquid

<s-view-event view-event-payload='{{ collection | standard_event_data: "view" | escape }}'>
  {% render 'collection-header', collection: collection %}
</s-view-event>

Listen for the event

document.addEventListener('shopify:collection:view', (event) => {
  trackBrowse(event.collection.handle, event.collection.productsCount);
});

Was this page helpful?