Adding Seline to your Shopify store

You can easily add Seline to your Shopify store by following the steps below.

Step 1: Add Seline's script to your theme

Copy your project code snippet from Seline installation page.
At Shopify go to Online Store > Themes.
Click Actions > Edit code for the theme you want to add Seline to.

Paste the code snippet just before the closing </head> tag at theme.liquid file.

Save the changes.

Now visit your website, click around a bit, and you should see the events appearing at your Seline dashboard.

But with the current setup Seline won't track page views and events that happen on the checkout pages. To fix this, we need to add a custom pixel.

Step 2: Add Seline's custom pixel

At Shopify go to Settings > Customer events.
Click on Add custom pixel, name it, and click Add pixel.

Copy the code snippet below.

Don't forget to replace YOUR_PROJECT_TOKEN with your project token.

We've set up tracking for a couple of custom events in the script, but you can add any events from Shopify's list if you'd like.

We've also added mask patterns for checkout pages, meaning that IDs will be masked with wildcards (*), for example /checkouts/cn/jwifwIfe32Mfewfwl/thank-you will be tracked as /checkouts/cn/*/thank-you.

const script = document.createElement('script');
script.src = 'https://cdn.seline.so/seline.js';
script.async = true;
script.setAttribute('data-token', 'YOUR_PROJECT_TOKEN');
script.setAttribute('data-mask-patterns', ['/checkouts/cn/*/review', '/checkouts/cn/*/processing', '/checkouts/cn/*/thank-you', '/checkouts/cn/*']);
script.setAttribute('data-auto-page-view', false);

document.head.appendChild(script);
const WAIT_TIME = 500;
const wfs = (cb) => {
  if (!window.seline) {
    return setTimeout(() => {
      waitForSeline(cb);
    }, WAIT_TIME)
  }
  cb();
}

// Track checkout pages
analytics.subscribe('page_viewed', async (event) => {
  const pathname = event.context.document.location.pathname;
  if (event.context.document.location.pathname.startsWith('/checkouts')) {
   wfs(() => seline.page(pathname));
  }
});

// Custom events below
analytics.subscribe('checkout_started', async (event) => {
  wfs(() => seline.track('checkout: start'));
});

analytics.subscribe('checkout_completed', async (event) => {
  wfs(() => seline.track('checkout: purchase'));
});

analytics.subscribe('cart_viewed', async (event) => {
  wfs(() => seline.track('cart: viewed'));
});

analytics.subscribe('product_added_to_cart', async (event) => {
  wfs(() => seline.track('cart: product added'));
});

Click anywhere to copy

Paste the code snippet, and don't forget to replace YOUR_PROJECT_TOKEN with your project token.

You're all set! Now visit your website, click around a bit, and you should see the events appearing at your Seline dashboard.