---
title: cart_viewed
description: >-
  The `cart_viewed` event logs an instance where a customer visited the cart
  page.
source_url:
  html: 'https://shopify.dev/docs/api/web-pixels-api/standard-events/cart_viewed'
  md: 'https://shopify.dev/docs/api/web-pixels-api/standard-events/cart_viewed.md'
---

# cart\_viewed

The `cart_viewed` event logs an instance where a customer visited the cart page.

#### Properties

* **clientId**

  **string**

  The client-side ID of the customer, provided by Shopify

* **context**

  **Context**

* **data**

  **PixelEventsCartViewedData**

* **id**

  **string**

  The ID of the customer event

* **name**

  **string**

  The name of the customer event

* **seq**

  **number**

  The sequence index number of the event.

* **timestamp**

  **string**

  The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format

* **type**

  **EventType.Standard**

### Context

A snapshot of various read-only properties of the browser at the time of event

* document

  Snapshot of a subset of properties of the \`document\` object in the top frame of the browser

  ```ts
  WebPixelsDocument
  ```

* navigator

  Snapshot of a subset of properties of the \`navigator\` object in the top frame of the browser

  ```ts
  WebPixelsNavigator
  ```

* window

  Snapshot of a subset of properties of the \`window\` object in the top frame of the browser

  ```ts
  WebPixelsWindow
  ```

### WebPixelsDocument

A snapshot of a subset of properties of the \`document\` object in the top frame of the browser

* characterSet

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the character set being used by the document

  ```ts
  string
  ```

* location

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the URI of the current document

  ```ts
  Location
  ```

* referrer

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the URI of the page that linked to this page

  ```ts
  string
  ```

* title

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the title of the current document

  ```ts
  string
  ```

### Location

A snapshot of a subset of properties of the \`location\` object in the top frame of the browser

* hash

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing a \`'#'\` followed by the fragment identifier of the URL

  ```ts
  string
  ```

* host

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the host, that is the hostname, a \`':'\`, and the port of the URL

  ```ts
  string
  ```

* hostname

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the domain of the URL

  ```ts
  string
  ```

* href

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the entire URL

  ```ts
  string
  ```

* origin

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the canonical form of the origin of the specific location

  ```ts
  string
  ```

* pathname

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing an initial \`'/'\` followed by the path of the URL, not including the query string or fragment

  ```ts
  string
  ```

* port

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the port number of the URL

  ```ts
  string
  ```

* protocol

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the protocol scheme of the URL, including the final \`':'\`

  ```ts
  string
  ```

* search

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing a \`'?'\` followed by the parameters or "querystring" of the URL

  ```ts
  string
  ```

### WebPixelsNavigator

A snapshot of a subset of properties of the \`navigator\` object in the top frame of the browser

* cookieEnabled

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Navigator), returns \`false\` if setting a cookie will be ignored and true otherwise

  ```ts
  boolean
  ```

* language

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Navigator), returns a string representing the preferred language of the user, usually the language of the browser UI. The \`null\` value is returned when this is unknown

  ```ts
  string
  ```

* languages

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Navigator), returns an array of strings representing the languages known to the user, by order of preference

  ```ts
  ReadonlyArray<string>
  ```

* userAgent

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Navigator), returns the user agent string for the current browser

  ```ts
  string
  ```

### WebPixelsWindow

A snapshot of a subset of properties of the \`window\` object in the top frame of the browser

* innerHeight

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Window), gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar

  ```ts
  number
  ```

* innerWidth

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Window), gets the width of the content area of the browser window including, if rendered, the vertical scrollbar

  ```ts
  number
  ```

* location

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Window), the location, or current URL, of the window object

  ```ts
  Location
  ```

* origin

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Window), the global object's origin, serialized as a string

  ```ts
  string
  ```

* outerHeight

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Window), gets the height of the outside of the browser window

  ```ts
  number
  ```

* outerWidth

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Window), gets the width of the outside of the browser window

  ```ts
  number
  ```

* pageXOffset

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Window), an alias for window\.scrollX

  ```ts
  number
  ```

* pageYOffset

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Window), an alias for window\.scrollY

  ```ts
  number
  ```

* screen

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Screen), the interface representing a screen, usually the one on which the current window is being rendered

  ```ts
  Screen
  ```

* screenX

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Window), the horizontal distance from the left border of the user's browser viewport to the left side of the screen

  ```ts
  number
  ```

* screenY

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Window), the vertical distance from the top border of the user's browser viewport to the top side of the screen

  ```ts
  number
  ```

* scrollX

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Window), the number of pixels that the document has already been scrolled horizontally

  ```ts
  number
  ```

* scrollY

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Window), the number of pixels that the document has already been scrolled vertically

  ```ts
  number
  ```

### Screen

The interface representing a screen, usually the one on which the current window is being rendered

* height

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Screen/height), the height of the screen

  ```ts
  number
  ```

* width

  Per \[MDN]\(https://developer.mozilla.org/en-US/docs/Web/API/Screen/width), the width of the screen

  ```ts
  number
  ```

### PixelEventsCartViewedData

* cart

  ```ts
  Cart | null
  ```

### Cart

A cart represents the merchandise that a customer intends to purchase, and the estimated cost associated with the cart.

* attributes

  The attributes associated with the cart. This property is only available if the shop has \[upgraded to Checkout Extensibility]\(https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-upgrade).

  ```ts
  Attribute[]
  ```

* cost

  The estimated costs that the customer will pay at checkout.

  ```ts
  CartCost
  ```

* id

  A globally unique identifier.

  ```ts
  string | null
  ```

* lines

  A list of lines containing information about the items the customer intends to purchase.

  ```ts
  CartLine[]
  ```

* totalQuantity

  The total number of items in the cart.

  ```ts
  number
  ```

### Attribute

Custom attributes associated with the cart or checkout.

* key

  The key for the attribute.

  ```ts
  string
  ```

* value

  The value for the attribute.

  ```ts
  string
  ```

### CartCost

The costs that the customer will pay at checkout. It uses \[\`CartBuyerIdentity\`]\(https://shopify.dev/api/storefront/reference/cart/cartbuyeridentity) to determine \[international pricing]\(https://shopify.dev/custom-storefronts/internationalization/international-pricing#create-a-cart).

* totalAmount

  The total amount for the customer to pay.

  ```ts
  MoneyV2
  ```

### MoneyV2

A monetary value with currency.

* amount

  The decimal money amount.

  ```ts
  number
  ```

* currencyCode

  The three-letter code that represents the currency, for example, USD. Supported codes include standard ISO 4217 codes, legacy codes, and non- standard codes.

  ```ts
  string
  ```

### CartLine

Information about the merchandise in the cart.

* cost

  The cost of the merchandise that the customer will pay for at checkout. The costs are subject to change and changes will be reflected at checkout.

  ```ts
  CartLineCost
  ```

* merchandise

  The merchandise that the buyer intends to purchase.

  ```ts
  ProductVariant
  ```

* quantity

  The quantity of the merchandise that the customer intends to purchase.

  ```ts
  number
  ```

### CartLineCost

The cost of the merchandise line that the customer will pay at checkout.

* totalAmount

  The total cost of the merchandise line.

  ```ts
  MoneyV2
  ```

### ProductVariant

A product variant represents a different version of a product, such as differing sizes or differing colors.

* id

  A globally unique identifier.

  ```ts
  string | null
  ```

* image

  Image associated with the product variant. This field falls back to the product image if no image is available.

  ```ts
  Image | null
  ```

* price

  The product variant’s price.

  ```ts
  MoneyV2
  ```

* product

  The product object that the product variant belongs to.

  ```ts
  Product
  ```

* sku

  The SKU (stock keeping unit) associated with the variant.

  ```ts
  string | null
  ```

* title

  The product variant’s title.

  ```ts
  string | null
  ```

* untranslatedTitle

  The product variant’s untranslated title.

  ```ts
  string | null
  ```

### Image

An image resource.

* src

  The location of the image as a URL.

  ```ts
  string | null
  ```

### Product

A product is an individual item for sale in a Shopify store.

* id

  The ID of the product.

  ```ts
  string | null
  ```

* title

  The product’s title.

  ```ts
  string
  ```

* type

  The \[product type]\(https://help.shopify.com/en/manual/products/details/product-type) specified by the merchant.

  ```ts
  string | null
  ```

* untranslatedTitle

  The product’s untranslated title.

  ```ts
  string | null
  ```

* url

  The relative URL of the product.

  ```ts
  string | null
  ```

* vendor

  The product’s vendor name.

  ```ts
  string
  ```

### EventType

* AdvancedDom

  ```ts
  advanced-dom
  ```

* Custom

  ```ts
  custom
  ```

* Dom

  ```ts
  dom
  ```

* Meta

  ```ts
  meta
  ```

* Standard

  ```ts
  standard
  ```

Examples

### Examples

* #### Accessing Standard Events

  ##### App Pixel

  ```js
  import {register} from '@shopify/web-pixels-extension';

  register(({analytics}) => {
    analytics.subscribe('cart_viewed', (event) => {
      // Example for accessing event data
      const totalCartCost = event.data.cart.cost.totalAmount.amount;

      const firstCartLineItemName =
        event.data.cart.lines[0]?.merchandise.product.title;

      const payload = {
        event_name: event.name,
        event_data: {
          cartCost: totalCartCost,
          firstCartItemName: firstCartLineItemName,
        },
      };

      // Example for sending event data to third party servers
      fetch('https://example.com/pixel', {
        method: 'POST',
        body: JSON.stringify(payload),
        keepalive: true,
      });
    });
  });
  ```

  ##### Custom Pixel

  ```js
  analytics.subscribe('cart_viewed', (event) => {
    // Example for accessing event data
    const totalCartCost = event.data.cart.cost.totalAmount.amount;

    const firstCartLineItemName =
      event.data.cart.lines[0]?.merchandise.product.title;

    const payload = {
      event_name: event.name,
      event_data: {
        cartCost: totalCartCost,
        firstCartItemName: firstCartLineItemName,
      },
    };

    // Example for sending event to third party servers
    fetch('https://example.com/pixel', {
      method: 'POST',
      body: JSON.stringify(payload),
      keepalive: true,
    });
  });
  ```

***