Lightspeed

Get Started

Install Clerk on Lightspeed following these easy steps

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

Connecting your store #

After following these simple steps you will be able to see your Live Demo, which gives you a personal overview of how Clerk will work on your webshop, before setting up the rest of the system.

Add store #

After logging in to my.clerk.io, the first thing you need to do is add your store:

Add new store form

  1. Write the Name and Domain of your webshop.

  2. Choose Lightspeed as the Platform and choose your Currency.

  3. Click Add Store.

Install tracking scripts #

The Clerk tracking script uses Lightspeed Liquid variables to read store data like currency and product context. Because of this, the script must be placed in a theme file where Liquid is processed.

Visitor tracking #

  1. In your Lightspeed backend, go to Design > Theme Editor > Advanced > Edit Code.

  2. Open layouts > custom.rain.

  3. Paste the following script at the bottom of the file, and replace INSERT_PUBLIC_API_KEY with your Public Key from my.clerk.io > Developers > API Keys.

<!-- Clerk.io Visitor Tracking (Lightspeed) -->
<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script'); e.type='text/javascript'; e.async=true;
    e.src='https://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);

  Clerk('config', {
    key: 'INSERT_PUBLIC_API_KEY',
    formatters: {
      convert_currency: function(price) {
        const rate_raw = '{{ 100 | money }}'.replace(/[^0-9.]/g, '');
        const rate = parseFloat(rate_raw) ? (parseFloat(rate_raw) / 100) : 1;
        return rate * price;
      }
    },
    globals: {
      currency_iso: '{{ shop.currency2.code }}',
      currency_symbol: '{{ shop.currency2.symbol }}'
    }
  });
  // Clerk.js Context
  Clerk('context', {
    product: {% if product.id %}'{{ product.id }}'{% else %}null{% endif %},
    category: {% if collection.category_id %}'{{ collection.category_id }}'{% else %}null{% endif %},
    page: {% if product.id %}null{% else %}{% if collection.category_id %}null{% else %}'{{ template }}'{% endif %}{% endif %}
  });

  {% if page.account.email %}
  Clerk('call', 'log/email', { email: '{{ page.account.email }}' });
  {% endif %}
</script>
  1. Click Save.

Order tracking #

  1. In your Lightspeed backend, go to Settings > Website-Settings > Web Extras.

  2. Find the Tracking box and insert the Clerk order tracking code.

Sales tracking code
<span
  class="clerk"
  data-api="log/sale"
  data-sale="{{ order.information.number }}"
  data-email="{{ order.customer.email }}"
  data-customer="{{ order.customer.id }}"
  data-products='[{% for product in order.products %}{"id":{{ product.product_id }},"quantity":{{ product.quantity }},"price":{{ product.base_price_incl }}}{% if not loop.last %},{% endif %}{% endfor %}]'>
</span>
  1. Click Save.

Sync data #

Syncing data connects your Lightspeed 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.