Shopify
Setup Litlyx in shopify within seconds.
Pre-Requisites
Before proceeding, ensure you sign up on Litlyx and create a new project.
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>
:
- Change
project_id_here
with your project_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
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:
- 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). |
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
product_added_to_cart
checkout_started
checkout_completed
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
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).