Conversion pixel on Shopify

Shopify no longer supports pasting a raw <script> tag into checkout — third-party tracking goes through Custom Pixels, a sandboxed environment built on Shopify's Customer Events API. This guide shows how to wire the Styrar conversion pixel into a custom pixel.

The sandbox doesn't give you direct DOM access, so instead of embedding Styrar's script tag, you call the tracking endpoint directly with fetch whenever a Shopify customer event fires.

Setup

1. In your Shopify admin, go to Settings → Customer events → Add custom pixel.

2. Name it (e.g. "Styrar conversions") and add code like this:

   JavaScript

   analytics.subscribe('checkout_completed', (event) => {
     const url = new URL(window.location.href);
     const clickToken = url.searchParams.get('styrar_ck') ||
       (typeof localStorage !== 'undefined' && localStorage.getItem('styrar_ck'));
     if (!clickToken) return;
   
     fetch('https://api.styrar.com/v1/pixel/track', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         clickToken,
         eventName: 'purchase',
         value: event.data.checkout.totalPrice.amount,
         eventData: { currency: event.data.checkout.totalPrice.currencyCode },
       }),
       keepalive: true,
     });
   });
   

   Subscribe to whichever event matches the conversion you care about — checkout_completed, payment_info_submitted, product_added_to_cart, and others are all available.

3. Allow network access. Shopify blocks outbound requests from custom pixels by default. In the same pixel's settings, add api.styrar.com under Permissions → Connect to third-party servers, or the request above will silently fail.

4. Set the pixel to Active.

A note on the click token

Shopify's pixel sandbox can't read localStorage the way a normal page can, so styrar_ck needs to still be present in the URL (or carried through as a cart attribute) by the time your event fires. If your checkout flow strips the query parameter before checkout_completed, capture the token earlier — on page_viewed — and store it as a cart attribute so you can read it back later.

This still uses the exact same public, unauthenticated POST /v1/pixel/track endpoint as every other platform — there's no Shopify-specific app to install on Styrar's side.

Related

• Conversion pixel — full reference