---
title: 'shopify:collection:view'
description: Fires when a buyer lands on a collection.
source_url:
  html: >-
    https://shopify.dev/docs/api/storefront-events-and-actions/events/collection-view
  md: >-
    https://shopify.dev/docs/api/storefront-events-and-actions/events/collection-view.md
api_name: storefront-events-and-actions
---

# 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](https://shopify.dev/docs/api/storefront-events-and-actions/events/dispatch).

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

#### Properties

* **collection**

  **StandardEventCollection**

  **required**

  The collection the buyer landed on.

* **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.

  ```ts
  string | null
  ```

* handle

  The collection handle, such as \`summer-sale\`.

  ```ts
  string
  ```

* productsCount

  How many products the collection currently contains.

  ```ts
  number
  ```

Examples

### Examples

* ####

  ##### Wrap the collection in Liquid

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

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

***