> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uselayers.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Storefront Pixel

> How the Layers storefront pixel uses a modern attribution algorithm that avoids third-party cookies and keeps the browser footprint light for fast pages.

## Installing the pixel

The Storefront Pixel is delivered through the Layers theme app extension — no Liquid snippet to paste, no API key to manage.

<Steps>
  <Step title="Open your theme customizer">
    In Shopify admin, go to **Online Store → Themes**, find your live theme, and click **Customize**.
  </Step>

  <Step title="Enable the Layers app embed">
    Open the **App embeds** panel in the left sidebar and toggle **Layers** on.
  </Step>

  <Step title="Save">
    Click **Save**. The pixel loads on every storefront page, ingests cart and customer context, and starts capturing events automatically.
  </Step>
</Steps>

The app embed handles tracking API keys, session context (`productsInCart`, `productsPurchased`, customer profile), DNS prefetch, and pixel script loading. You do not need to edit `theme.liquid` or any other theme file.

<Note>Please [contact support](mailto:support@uselayers.com) if you have any questions or could use some assistance enabling the Storefront Pixel.</Note>

## Events captured by pixel

* Collection View
* Product Click
* Product View
* Product Add to Cart
* Block View

For information on forwarding these events to third-party analytics services like Microsoft Clarity and Blotout.io, see [Third-Party Integrations](/shopify-integration/third-party-integrations).

### Line item properties

The pixel appends a line item property with the key `_layers_attribution` to some add-to-cart forms. The value corresponds to the identifier of the request made using the Search or Browse API where the customer last saw the product before adding it to their cart. This property is only added if the customer clicked on products from the Search or Browse APIs.

### Order attributes

Layers reads the following order-level note attributes to associate purchase events with browsing sessions:

| Attribute            | Description                                                                                                     |
| :------------------- | :-------------------------------------------------------------------------------------------------------------- |
| `_em_session_id`     | The Edgemesh session ID. When present, this is used as the primary session identifier for purchase attribution. |
| `_em_device_id`      | The Edgemesh device ID. Stored for attribution context.                                                         |
| `_em_nav_id`         | The Edgemesh navigation ID. Stored for attribution context.                                                     |
| `_layers_session_id` | The Layers session ID. Used as a fallback when Edgemesh attributes are not present.                             |

When both `_em_session_id` and `_layers_session_id` are present on an order, `_em_session_id` takes priority.

<Note>
  If you have the [Edgemesh integration](/shopify-integration/third-party-integrations#edgemesh) enabled, the Edgemesh attributes are automatically appended to orders. No additional configuration is required.
</Note>

## Auto redirect support

The storefront pixel can automatically redirect customers when a search or autocomplete request matches a [semantic redirect](/platform/semantic-redirects). When the **Auto Redirect** setting is enabled in **Settings → Semantic Redirects**, the pixel intercepts API responses containing a `_meta.redirect` object. It then navigates the customer to the target URL before the search results page renders.

This eliminates the need for custom frontend logic to handle redirect responses. For details on enabling this feature, see [Semantic Redirects — Auto redirect](/platform/semantic-redirects#auto-redirect-experimental).

## Search inspector (debug menu)

The Storefront Pixel includes a built-in debug panel called the **Search Inspector**. It helps developers and QA teams verify tracking behavior, inspect API requests, and submit search quality feedback — all without leaving the storefront.

### Activating the debug menu

Add the `_layers_debug_menu=true` query parameter to any page URL on your storefront:

```
https://your-store.myshopify.com?_layers_debug_menu=true
```

Once activated, the debug mode persists for the entire browser session (using `sessionStorage`). To deactivate it, use `_layers_debug_menu=false`.

### Panel tabs

The Search Inspector has four tabs:

* **Searches** — Displays all API requests intercepted by the pixel (search, browse, similar, blocks). Each request shows the URL, request type, and timestamp. You can expand a request to reveal the full request/response bodies, workflow steps (like spelling corrections, query expansions, and applied rules), metadata, and search IDs.

* **Activity** — Shows all tracking events captured by the pixel (product clicks, views, add-to-carts, and more) with delivery status and full event payloads.

* **Feedback** — A form for submitting search quality feedback directly to Layers. The search reference ID is automatically populated from the most recent search. Includes a rating (good/poor results) and optional text feedback.

* **Rules** — Displays the current session state including experiment info, active search query, collection context, result counts, and attribution tokens. Also shows any merchandising rules that were applied to recent requests.

### Panel features

* **Draggable and resizable** — The panel can be moved anywhere on screen and resized. Position is persisted across page navigations within the session.
* **Dockable** — Collapses to a small handle on the left or right edge of the viewport. Click the handle to expand.
* **Shadow DOM isolation** — The panel renders inside a closed Shadow DOM, so it does not interfere with the storefront's styles or layout.

<Note>
  The Search Inspector is dynamically loaded only when debug mode is active. It adds no overhead to the storefront when not in use.
</Note>

## Browser compatibility

### Supported specs

* Back/Forward Cache.
* Speculation Rules.
* SPA Navigation.