Shopify

Get Started

Install Clerk on Shopify following these easy steps

Get Clerk up and running on your Shopify store in just a few steps. This guide walks you through connecting your store, installing tracking, and syncing your data.

Connecting your store #

The first step of installing Clerk is connecting your Store with your Clerk account.

After following these simple steps, you will be able to see your Live Demo Store, which gives you a personal overview of how Clerk will work on your webshop.

Add store #

  1. Login to my.clerk.io. The first time you do this, you will see the Add New Store page.

  2. Write the Name and Domain of your webshop.

  3. Choose Shopify as the Platform and choose your Currency.

  4. Click Add Store.

Install visitor tracking #

  1. In your Shopify backend, go to Online Store > Themes.

  2. Click ... > Edit code for the theme you want to modify.

  3. Open settings_schema.json and append the Clerk settings snippet at the bottom, just before the last ].

Settings schema file
,
{
  "name": "Clerk settings",
  "settings": [
    {
      "type": "header",
      "content": "Clerk"
    },
    {
      "type": "checkbox",
      "id": "enable_clerk",
      "label": "Enable Clerk",
      "default": true
    }
  ]
}

  1. Click Save.

  2. Under Snippets, click Add a new snippet named clerk-tracking.liquid and click Done.

  3. Insert your Clerk visitor tracking snippet into the new file and click Save. Replace INSERT_PUBLIC_API_KEY with your Public Key from my.clerk.io > Developers > API Keys.

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function (w, d) {
    var e = d.createElement('script'); e.type = 'text/javascript'; e.async = true;
    e.src = (d.location.protocol == 'https:' ? 'https' : 'http') + '://cdn.clerk.io/clerk.js';
    var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    w.__clerk_q = w.__clerk_q || []; w.Clerk = w.Clerk || function () { w.__clerk_q.push(arguments) };
  })(window, document);
  let publicKey = 'INSERT_PUBLIC_API_KEY';
  Clerk('config', {
    key: publicKey,
    formatters: {
      currency_converter: function (price) {
        var converted_price = (price * Shopify.currency.rate);
        return (converted_price).toString();
      }
    },
    globals: {
      currency_iso: "{{ cart.currency.iso_code }}",
      currency_symbol: "{{ cart.currency.symbol }}"
    }
  });

  // Clerk.js Context
  Clerk('context', {
    product: {% if product %}{{ product.id }}{% else %}null{% endif %},
    category: {% if collection %}{{ collection.id }}{% else %}null{% endif %},
    page: {% if product %}null
          {% elsif collection %}null
          {% elsif page %}{{ page.id }}
          {% elsif blog %}{{ blog.id }}
          {% elsif article %}{{ article.id }}
          {% elsif template.name == 'index' %}'homepage'
          {% else %}'{{ template.name }}'
          {% endif %}
  });

  {% if customer %}
    Clerk('call', 'log/email', { email: "{{ customer.email }}" });
  {% endif %}

  document.addEventListener('DOMContentLoaded', (e) => {
    (async function fetchVisitorId() {
      let visitorId = window.sessionStorage.getItem('visitor_id');
      try {
        if (!visitorId) {
          const response = await fetch(`https://api.clerk.io/v2/misc/visitor_id?key=${publicKey}&visitor=auto`);
          const data = await response.json();
          visitorId = data.visitor;
          window.sessionStorage.setItem('visitor_id', data.visitor);
        }
        Clerk('config', {
          visitor: visitorId,
        });
      } catch (error) {
        console.error('Error:', error);
      } finally {
        function publishClerkContext() {
          if (window.Shopify?.analytics?.publish) {
            window.Shopify.analytics.publish('clerk_pixel_context', {
              localeApiKey: publicKey,
              visitor: visitorId,
            });
          } else {
            setTimeout(publishClerkContext, 200);
          }
        }
        publishClerkContext();
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
  1. Open theme.liquid and add this just before </head>:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}
Theme liquid tracking code

Install order tracking #

  1. In Shopify, go to Settings > Customer Events.

  2. Click Add custom pixel, name it Clerk.io, then click Add pixel.

  3. Paste your Clerk Sales Tracking code and click Save.

analytics.subscribe("clerk_pixel_context", (event) => {
  browser.localStorage.setItem("clerkPixelContext", JSON.stringify(event.customData));
});

analytics.subscribe("checkout_completed", async (event) => {
  const pixelContextRaw = await browser.localStorage.getItem("clerkPixelContext");
  const pixelContext = await JSON.parse(pixelContextRaw);
  const checkout = event.data.checkout;
  fetch(`https://api.clerk.io/v2/log/sale/shopify`, {
    method: "POST",
    mode: "cors",
    body: JSON.stringify({
      sale: checkout.order.id,
      key: pixelContext.localeApiKey,
      visitor: pixelContext.visitor,
    }),
  });
});
  1. Click Connect and confirm.
Insert pixel tracking

Sync data #

Syncing data connects your Shopify store to Clerk, allowing Clerk to access your products, orders, customers, and other store information. This enables Clerk to provide personalized recommendations and search results based on your actual store data. Follow the steps in the Sync Data guide to set up the data sync.

Markets and locales #

If your Shopify setup uses multiple languages, markets, or domains, configure this before you go live.

  1. Finish the base setup in this guide first.
  2. Open my.clerk.io > Data > Configuration.
  3. Configure market-specific settings (Shopify Market, Shopify Locale, Prefix URLs with Locale, Force Relative URLs).
  4. Add inventory locations if stock should be scoped by location.
  5. Start a new sync and verify product URLs on each storefront language/domain.

Shop Locale/Shopify Locale should use the standardized Shopify language locale code, for example da for Denmark and sv for Sweden.

If you are unsure which locale codes your store uses, ask Shopify’s Sidekick assistant to list the locales configured for the store.

Use the detailed mapping guide here: Shopify integration settings.

Remember to translate Headlines in Element -> Edit -> Select Design to match each language.

Multi-store setup #

If your setup spans multiple Shopify stores (not only multiple languages inside one store), create one Clerk.io store per Shopify store:

  1. In my.clerk.io, click + Add new Store.
  2. Copy content from the main store during creation.
  3. Connect and sync each Shopify store separately.
  4. Use the matching public key per storefront in tracking.