Back to docs

Links

Conversion pixel on Shopify

Install the Styrar conversion pixel on Shopify via the Styrar app (recommended) or a Custom Pixel.

ClaudeChatGPTCursor

Shopify no longer supports pasting a raw <script> tag into checkout. Third-party tracking goes through Customer events (sandboxed pixels). This guide covers the Styrar conversion pixel on Shopify.

Coming later: automatic setup with the Styrar Shopify app

When the Styrar Shopify app is available and installed on your store (and linked to your Styrar account), Styrar will place the conversion pixel for you under Settings → Customer events. You will not need to paste Custom Pixel code or allowlist api.styrar.com by hand.

Until then, use the Custom Pixel steps below.

Setup with a Custom Pixel

  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 custom 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.

Related