​
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
  1. Access the Shopify panel.
  2. Go on Sales Channels > Online Store > Themes.
  3. Find the active theme, click on the 3 dots button (⋮) and select Edit code.
  4. Open the file: layout/theme.liquid.
Hero Light

​
Insert script into the head section.

  1. In the theme.liquid file, look for the <head> tag.
  2. Paste the following code just right before </head>:
<script defer data-workspace="workspace_id" 
src="https://cdn.jsdelivr.net/npm/litlyx-js/browser/litlyx.js">
</script>
  1. Change workspace_id with your workspace_id from Litlyx’s dashboard.
  2. Click on Save on the top-right corner.
Hero Light 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

  1. Go on Shopify Admin > Settings > Customer events.
Hero Light
  1. Click on Create Custom Pixel.
  2. Give your Pixel a name, e.g. Litlyx Web Pixel.
  3. Click on Add Pixel to save.
Hero Light
  1. Look for the code field.
Hero Light
  1. 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/browser/litlyx.js';
document.head.appendChild(script);
script.onload = () => {
    //See the examples below to add 
    //the scripts you need in this section.
};
  1. Click on Connect.
Hero Light 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.
purposeShopify event purpose
product_viewedUser checks a product.
product_added_to_cartUser adds a product to the cart.
product_removed_from_cartUser removes a product from the cart.
cart_viewedUser checks the cart.
checkout_startedUser starts the checkout process.
checkout_completedUser finalizes the order.
page_viewedPage 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 typeURL
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).