Shopify

Pre-Requisites

Before proceeding, ensure you sign up on Litlyx and create a new workspace.

How to Connect Litlyx Analytics to Your Shopify Store

Track what your visitors do, where they come from, and key e-commerce actions… all in one place. It’s divided in two parts:

1. Standard Setup (Required)

This step installs the Litlyx script to track visits on all your pages… like the homepage, product pages, and collection pages. Setup time: 1 minute

2. Advanced Event Tracking (Optional)

Uses Shopify Web Pixels to automatically send e-commerce events to Litlyx. Setup time: 3 minutes With this, you can track actions like:

Adding a product to the cart
Starting checkout
Completing a purchase
Viewing checkout pages

These actions are not tracked by the standard setup alone. For full e-commerce tracking, we recommend enabling this step.

Step 1: Standard Setup (mandatory)

This mode turns on Litlyx for all the public pages of your site. Steps

Access the Shopify panel.
Go on Sales Channels > Online Store > Themes.
Find the active theme, click on the 3 dots button (⋮) and select Edit code.
Open the file: layout/theme.liquid.

Insert script into the head section.

In the theme.liquid file, look for the <head> tag.
Paste the following code just right before </head>:

<script defer data-workspace="workspace_id" 
src="https://cdn.jsdelivr.net/npm/litlyx-js@latest/browser/litlyx.js">
</script>

Change workspace_id with your workspace_id from Litlyx’s dashboard.
Click on Save on the top-right corner.

That’s it! Litlyx is now up and running. It’s already tracking key metrics like visitor counts, real-time users, top pages, traffic sources, bounce rate, and more.

Now you’re ready to set up the second part… this will let you send custom events to Litlyx for deeper insights.

Track custom events with Web Pixels API (optional)

Send advanced e-commerce events from Shopify directly to Litlyx’s Custom Events page.

page_viewed
product_viewed
product_added_to_cart
product_removed_from_cart
checkout_started
checkout_completed

Web Pixel Shopify Documentation

How to activate your Web Pixel

Go on Shopify Admin > Settings > Customer events.

Click on Create Custom Pixel.
Give your Pixel a name, e.g. Litlyx Web Pixel.
Click on Add Pixel to save.

Look for the code field.

Enter the following code:

const script = document.createElement('script');
script.defer = true; 
// Important step
script.dataset.manual = true;
// Change with you workspace_id
script.dataset.workspace = "workspace_id";
script.src = 'https://cdn.jsdelivr.net/npm/litlyx-js@latest/browser/litlyx.js';
document.head.appendChild(script);
script.onload = () => {
    //See the examples below to add 
    //the scripts you need in this section.
};

Click on Connect.

Your new Pixel is all set to track the events you want to send to Litlyx’s dashboard. Let’s take a look at some events we think you’ll enjoy keeping an eye on.

Track e-commerce events in Litlyx using Custom Events

Here is a summary of the events supported by Shopify and trackable with analytics.subscribe() function.

purpose	Shopify event purpose
`product_viewed`	User checks a product.
`product_added_to_cart`	User adds a product to the cart.
`product_removed_from_cart`	User removes a product from the cart.
`cart_viewed`	User checks the cart.
`checkout_started`	User starts the checkout process.
`checkout_completed`	User finalizes the order.
`page_viewed`	Page view (including checkout if filtered).

List of all ecommerce events available on Shopify

Most common E-commerce events you may want to track

💡 You can also use analytics.subscribe(“all_standard_events”, …) to debug and try all available events.

product_viewed

analytics.subscribe("product_viewed", (event) => {
  const variantTitle = event.data.productVariant.title ?? "";
  const productTitle = event.data.productVariant.product.title;
  const productId = event.data.productVariant.product.id;
  const price = event.data.productVariant.price.amount;
  const currency = event.data.productVariant.price.currencyCode;

  Lit.event("Product viewed", {
    product_id: productId,
    title: `${productTitle} ${variantTitle}`,
    price,
    currency
  });
});

product_added_to_cart

analytics.subscribe('product_added_to_cart', (event) => {
  const line = event.data.cartLine;
  const title = `${line.merchandise.product.title} ${line.merchandise.title}`;
  const price = line.cost.totalAmount.amount;
  const currency = line.cost.totalAmount.currencyCode;

  Lit.event('Add to cart', {
    metadata: {
      "product-name": title,
      "price": price,
      "currency": currency
    }
  });
});

checkout_started

analytics.subscribe('checkout_started', (event) => {
  const amount = event.data.checkout.totalPrice.amount;
  const currency = event.data.checkout.currencyCode;

  Lit.event('Checkout started', {
    metadata: {
      amount,
      currency
    }
  });
});

checkout_completed

analytics.subscribe('checkout_completed', (event) => {
  const checkout = event.data.checkout;
  const totalPrice = checkout.totalPrice?.amount;
  const discounts = checkout.discountApplications.map(d => d.title);
  const firstItem = checkout.lineItems[0];
  const firstItemDiscount = firstItem.discountAllocations[0]?.amount;

  const transactions = checkout.transactions.map(tx => ({
    paymentGateway: tx.gateway,
    amount: tx.amount
  }));

  Lit.event('Checkout Completed', {
    metadata: {
      totalPrice,
      discountCodesUsed: discounts,
      firstItem: {
        quantity: firstItem.quantity,
        title: firstItem.title,
        discount: firstItemDiscount
      },
      paymentTransactions: transactions
    }
  });
});

Send checkout page views from Shopify to your Litlyx dashboard

The standard script doesn’t track checkout pages, because Shopify handles them differently from normal pages. To track these pages, you need to use a Web Pixel and listen for the page_viewed event… then check the page’s path (also called pathname). Here are some common checkout paths you might want to track:

page type	URL
`Start checkout`	/checkouts/cn/…
`Shipping`	/checkouts/cn/…/shipping
`Payment`	/checkouts/cn/…/payment
`Review`	/checkouts/cn/…/review
`Thank-you (Order complete)`	/checkouts/cn/…/thank-you

Code to track page_viewed in checkout

analytics.subscribe('page_viewed', async (event) => {
    const location = event.context.document.location;
    if (location.pathname.startsWith('/checkouts')) {
           Lit.pushVisit(location.pathname)
    }
  });

This event is only used to track checkout pages. For all other pages, the “Page Viewed” event is handled by the code added in the theme.liquid file (see Step 1).

Get Started

Quickstarts

Pre-Requisites

How to Connect Litlyx Analytics to Your Shopify Store

1. Standard Setup (Required)

2. Advanced Event Tracking (Optional)

Step 1: Standard Setup (mandatory)

Insert script into the head section.

Track custom events with Web Pixels API (optional)

How to activate your Web Pixel

Track e-commerce events in Litlyx using Custom Events

Most common E-commerce events you may want to track

product_viewed

product_added_to_cart

checkout_started

checkout_completed

Send checkout page views from Shopify to your Litlyx dashboard

Code to track page_viewed in checkout

​Pre-Requisites

​How to Connect Litlyx Analytics to Your Shopify Store

​1. Standard Setup (Required)

​2. Advanced Event Tracking (Optional)

​Step 1: Standard Setup (mandatory)

​Insert script into the head section.

​Track custom events with Web Pixels API (optional)

​How to activate your Web Pixel

​Track e-commerce events in Litlyx using Custom Events

​Most common E-commerce events you may want to track

​product_viewed

​product_added_to_cart

​checkout_started

​checkout_completed

​Send checkout page views from Shopify to your Litlyx dashboard

​Code to track page_viewed in checkout

Pre-Requisites

How to Connect Litlyx Analytics to Your Shopify Store

1. Standard Setup (Required)

2. Advanced Event Tracking (Optional)

Step 1: Standard Setup (mandatory)

Insert script into the head section.

Track custom events with Web Pixels API (optional)

How to activate your Web Pixel

Track e-commerce events in Litlyx using Custom Events

Most common E-commerce events you may want to track

product_viewed

product_added_to_cart

checkout_started

checkout_completed

Send checkout page views from Shopify to your Litlyx dashboard

Code to track page_viewed in checkout