Installing the pixel
Copy and paste the following Liquid Code into yourlayouts/theme.liquid file before any JavaScript that utilizes the Layers API. Replace {{ PUT YOUR TRACKING API KEY HERE}} with the Tracking API Key found under Settings > API Access.
Pixel Liquid Code
Pixel Liquid Code
Please contact support if you have any questions or could use some assistance installing the Storefront Pixel.
Events captured by pixel
- Collection View
- Product Click
- Product View
- Product Add to Cart
- Block View
Line item properties
A Line Item Property with the key_layers_attribution is appended 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. |
_em_session_id and _layers_session_id are present on an order, _em_session_id takes priority.
If you have the Edgemesh integration enabled, the Edgemesh attributes are automatically appended to orders. No additional configuration is required.
Auto redirect support
The storefront pixel can automatically redirect customers when a search or autocomplete request matches a semantic redirect. When the Auto Redirect setting is enabled in Settings → Semantic Redirects, the pixel intercepts API responses containing a_meta.redirect object and 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.
Search inspector (debug menu)
The Storefront Pixel includes a built-in debug panel called the Search Inspector that 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:
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, timestamp, and can be expanded 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, etc.) with their status (queued or sent) 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.
The Search Inspector is dynamically loaded only when debug mode is active. It adds no overhead to the storefront when not in use.
Browser compatibility
Supported specs
- Back/Forward Cache.
- Speculation Rules.
- SPA Navigation.