Shopify
Shopify needs two installs, not one: the storefront snippet in your theme and a Custom Pixel for checkout, because Shopify's checkout runs none of your theme code.
A Shopify storefront is two surfaces with different rules, and that is the whole reason this page exists.
- Theme pages (home, product, collection, cart). Your scripts run here, so Optimeleon both serves variants and tracks normally.
- Checkout, thank-you and order-status pages. These run in a sandbox where your theme scripts do not execute at all. Shopify permits tracking there only inside a Custom Pixel.
So a Shopify install has two halves. There are two ways to get them both in place.
Recommended: connect your store
From the Integrations page, open the store-platform section and click Connect. Approve one permission screen, then press Save once in the theme editor Shopify opens for you. That press of Save is the entire merchant task.
Behind it, Optimeleon:
- installs the checkout pixel, with its analytics-consent category already declared, so you never hand-build a Custom Pixel or pick a permission from a dropdown;
- installs the theme script as a Shopify app embed block, so nothing is edited in
theme.liquid; - claims your store domains for the project (your primary domain and your
your-store.myshopify.comdomain), so there is no separate domain step; - registers the webhooks that keep the connection state honest.
It is a single unlisted Shopify app, not listed in the App Store, carrying only those two extensions.
Three lifecycle behaviours worth knowing
| Situation | What happens |
|---|---|
| You publish a different theme | Shopify does not carry an app embed onto a newly published theme, so switching your live theme silently removes it. Setup detects this and shows a Re-activate button: one click reopens the theme editor with the embed pre-enabled and you press Save again. The checkout pixel is unaffected by a theme change. |
| You uninstall the app | Both extensions are removed automatically, the theme embed and the checkout pixel, so no dead code is left behind. Optimeleon marks the connection uninstalled and tells you. |
| Where the embed loads | Shopify renders app embeds at your theme's header-content position, which can be slightly lower in <head> than a hand-paste at the very top. Optimeleon adds resource hints so the edge scripts start downloading as early as possible, and the anti-flicker guard still runs before paint. If you need the script at the absolute top of the head, install by hand instead. |
Installing by hand: the two-paste flow
An agency-locked theme, or simply a preference for doing it yourself, is fine. This is a permanent, fully-supported path. The Connect app is an enhancement on top of it, never a replacement.
Paste the theme snippet
Add the standard Optimeleon install snippet to the <head> of your theme.liquid. It is the same snippet as any other site, with no Shopify-specific changes. It serves variants on your theme pages and captures storefront pageviews and conversions.
See Installing the script for placement and verification.
Create the Custom Pixel
In your Shopify admin, create a Custom Pixel and paste the pixel snippet Optimeleon generates for you. It is already stamped with your project's values, so there is nothing to fill in.
That one paste is the whole pixel. No event code goes underneath it, ever.
What the pixel tracks
Checkout, thank-you and order-status pageviews, plus your store's own commerce events (purchases, checkout steps, cart and browse activity) and any custom event your theme or apps publish. Storefront pageviews keep coming from the theme snippet, so the two surfaces can never double-count the same pageview.
URLs are cleaned in the browser before they are sent
- A checkout URL carries a per-checkout token (
/checkouts/cn/<token>/information). That token opens that shopper's checkout and order status, so it is stripped client-side and only the cleaned path (/checkouts/information) is stored. The token never reaches Optimeleon's servers. - The order-status
?key=parameter and the usual sensitive query keys are dropped the same way. - A URL shape Optimeleon does not recognise is neither dropped nor passed through: unknown path segments are replaced with
:tokenand the event is flagged, so the page still counts and still leaks nothing.
Conversion goals: pick them, do not write them
There is no event code to paste on Shopify, on either install route. From the moment the pixel is live it reports your store's own events, and the Events page lists them with real counts from your recent traffic. Click one to make it a conversion goal.
Two things follow from that:
- You see it before you commit to it. The counts are your store's real recent activity, so you can confirm tracking works before a goal exists.
- A goal counts from the moment you create it. The picker's history informs your choice; it does not become the goal's history.
