Merchants & developers

Install Apex on a custom storefront

Add the Apex script snippet to a custom, Webflow, headless, or other non-native storefront.

For non-native storefronts, Apex loads through a small script snippet from the Apex Worker. Apex provides the shop-specific snippet during setup. Use this path for custom storefronts, Webflow, headless builds, and other sites where a developer can add a script to the global document head. The Installation page provides the exact .js snippet for your shop; onboarding shows the Worker path for developer handoff.

Add the script

Place it in the global <head>, before your other scripts. It loads synchronously so the anti-flicker guard can prevent visible content flashes (guard is capped at 1.2 s).

html
<script src="<worker>/s/<shopId>.js"></script>

Handle single-page apps

The Apex SDK observes browser history changes, popstate, hashchange, and the Navigation API when configured to do so. It also tracks pageviews on page load and SPA navigation through the SDK analytics pipeline. For headless or SPA stores, install the snippet once in the global shell rather than re-adding it inside each route component.

If your consent manager blocks analytics before consent, keep Apex behind the same consent rules your store applies to testing and analytics scripts. The Installation page includes a consent-mode example that starts tracking only after your cookie banner callback grants consent.

Confirm events arrive

  1. Publish the snippet to the storefront.
  2. Open the live storefront and visit a tracked page.
  3. Return to Apex onboarding or Installation and run the verification check.

Troubleshooting

  • If nothing appears, confirm the snippet URL exactly matches the one Apex generated for the shop.
  • If only some pages track, confirm the snippet is loaded by the shared layout or global head.
  • If a consent manager is installed, grant consent during the test visit and verify again.