Context

Use Clerk('context', ...) to tell Clerk.js about various frontend concepts, like which product or category is viewed or which email address is associated to the user. This can be used to personalise recommendations, update the empty state in Omnisearch, allow Chat to understand what the visitor is currently seeing, and more.

Add the following snippet to your page template after Clerk.js has loaded. It passes the current product ID, category ID, or template name to Clerk.js and uses null when that context does not apply.

<script>
  Clerk('context', {
    product: 123,
    category: 456,
    page: 789,
    email: "[email protected]"
  });
</script>

Context field	Value sent
`product`	The current product ID, a list of product IDs on a cart page, or `null` when the page has no product context.
`category`	The current category ID, or `null` when the page is not a category page.
`page`	The current template name when the page is neither a product nor category page; otherwise `null`.
`email`	The email address of the current visitor, if available. Otherwise, `null`.

Use product context on cart pages

Pass the product IDs in the cart as a list, even if the cart contains just a single element:

<script>
  Clerk('context', {
    product: [123, 456]
  });
</script>

Context reloads

When a shopper navigates without a full page load, update Clerk.js context to keep existing recommendation blocks in sync. For example, after navigating to category 276, run:

Clerk('context', 'category', '276');

By default, Clerk.js watches changes to product, category, page, and email. A changed value reloads already-initialized blocks whose IDs come from context (id_source: 'context'); setting a key to its current value does not trigger another reload. Context changes do not reload popups or blocks whose IDs come from page elements.

Context reloads refresh existing blocks; they do not detect or initialize newly added markup. For newly added Elements, use the initialization options in Element Rendering instead. Each changed context key can generate an additional API request.

Optional: Handle context changes yourself

Listen for context changes with Clerk('on', 'context', callback). If your storefront manages block updates itself, disable automatic context reloads with:

Clerk('config', 'context_watch', false);

The context event still fires when automatic reloads are disabled.