Loading tutorials…
Loading tutorials…
Shopify killed checkout.liquid in 2024, which broke the old GTM-on-checkout install pattern. This walks through the 2026-correct path: theme.liquid for storefront pages, Custom Pixels for the checkout. Both are required if you want full-funnel tracking.
Who this is forShopify store owners on Basic, Shopify, Advanced, or Plus plans who need GTM to manage GA4, Meta Pixel, and ad tags in one place. If you only need basic GA4, Shopify's native integration is enough. If you need any custom tag or server-side work, you need GTM.
What you'll need
Step 1
In tagmanager.google.com, create a Web container. Copy both the <head> and <body> snippets — Shopify needs both.
Open tagmanager.google.com → Create Account → Container name "everestx-shopify" (or your store name) → Target platform "Web."
After creation, GTM shows two snippets in a modal. The first is a <script> block that goes in the page <head>. The second is a <noscript> <iframe> that goes immediately after the opening <body> tag.
Copy both snippets to a notepad. The Container ID looks like GTM-XXXXXXX — note it down separately.
Do not close the GTM modal yet — you can re-open via Admin → Install Google Tag Manager, but having it open while editing theme code reduces copy-paste errors.
Step 2
Shopify storefront pages (home, collection, product, cart) all render from theme.liquid. Paste both snippets here.
Shopify Admin → Online Store → Themes → Actions → Edit Code on your published theme.
In the file tree, open Layout → theme.liquid.
Find the <head> tag (near the top of the file). Paste the GTM <script> snippet immediately after the opening <head> tag, before any other <script> or <link>.
Find the <body> tag (further down). Paste the GTM <noscript> snippet immediately after the opening <body> tag.
Click Save. The change deploys to the live store within 60 seconds.
Step 3
GTM reads from a window.dataLayer object. Initialize it before the GTM snippet fires, with Liquid variables for the page context.
Still in theme.liquid, immediately ABOVE the GTM <script> snippet you pasted in step 2, add a new <script> block.
Inside the new block, write: window.dataLayer = window.dataLayer || []; window.dataLayer.push({ "page_type": "{{ template }}", "customer_logged_in": {{ customer | json | default: "null" }} });
For product pages, add an "item" object with product id, title, price (from {{ product.id }}, {{ product.title }}, {{ product.price | money_without_currency }}).
For collection pages, push the collection handle.
Save. Re-open the live store in incognito and verify in the browser console that window.dataLayer logs your page context before GTM fires.
Step 4
checkout.liquid is removed for all stores in 2024. The 2026 install path for checkout is Shopify's Custom Pixels in Settings → Customer events.
Shopify Admin → Settings → Customer events → Add custom pixel.
Name it "Google Tag Manager — Checkout" and set permission to "Not required" if your store collects consent through GTM Consent Mode. Otherwise set to "Required."
In the code editor, paste a sandbox-safe GTM loader: it uses analytics.subscribe('checkout_completed', ...) to push purchase events into dataLayer. The standard GTM snippet won't work here directly — the sandbox blocks DOM access.
Use Shopify's documented pattern: load the GTM script via analytics.publish() with the container ID, then subscribe to checkout_started, payment_info_submitted, and checkout_completed events, pushing each as a dataLayer event with the order payload.
Save and Connect. Test with a real order via test mode (Bogus Gateway) and verify the events fire in Tag Assistant.
Step 5
Inside GTM, enable Built-in Variables (Page URL, Click ID, Form ID) and add your first tag (GA4 Configuration).
Open GTM workspace → Variables → Configure (top-right of Built-in Variables section).
Enable: Page URL, Page Path, Page Hostname, Referrer, Click Element, Click Classes, Click ID, Click URL, Form Element, Form ID, Form Classes, Form Text.
Go to Tags → New → Google Tag (gtag.js) → Tag ID: G-XXXXX (your GA4 Measurement ID).
Trigger: All Pages. Save tag as "GA4 — Base Config."
Click Submit (top-right) → Publish. Version name: "v1 — Initial install + GA4 base."
Step 6
Use the new Tag Assistant (tagassistant.google.com) to verify both storefront and checkout fire correctly.
Open tagassistant.google.com → Add domain → enter your store URL.
Click Connect. A new browser tab opens with debug mode active.
Navigate: home → collection → product → add to cart → checkout. Watch the Tags column at each step.
Storefront pages should fire "GA4 — Base Config" on every page load. The Container Loaded event should appear in Summary.
In checkout, the Custom Pixel events (checkout_started, checkout_completed) should appear in the Variables tab when the corresponding step is completed.
If anything is missing, re-check the snippet placement (step 2) or the dataLayer push (step 3). Custom Pixel issues need to be debugged inside Shopify's Customer Events log, not GTM.
Step 7
Publish the GTM workspace. Write a 1-page README inside the GTM Notes field so the next operator knows what this container does.
GTM → Submit (top-right) → Version name: 'v1 — Shopify install live.' Description: list which tags fire on which pages.
In Admin → Container Notes, write the Container ID, who owns it, which Shopify theme it's installed on, and the date.
Save and Publish. The version goes live immediately.
In your team docs or Notion, screenshot the GTM container Tags list and store with the credentials. Future operators will thank you.
Common mistakes
Installing GTM only on theme.liquid and forgetting checkout
What goes wrong: Storefront tracking works perfectly. Then you go to GA4 and see zero purchase events. You've tracked the funnel up to checkout entry, lost the conversion, and have no data to optimize ads against. Most stores lose 100% of purchase attribution this way for 2-4 weeks before noticing.
How to avoid: Always install Custom Pixels in Settings → Customer Events alongside theme.liquid. The storefront and checkout are separate environments.
Pasting the GTM snippet inside an existing <script> block
What goes wrong: Both your GTM snippet and the original script break. No errors visible in the console — the page just runs without GTM. You debug for hours.
How to avoid: Always paste GTM as a sibling element to other head-level scripts, never inside one. View source to verify.
Using the legacy checkout.liquid install pattern
What goes wrong: Tutorials from 2020-2023 tell you to paste GTM into checkout.liquid. Shopify removed it for all stores in 2024. Your tags fail silently and nobody at Shopify support volunteers this information.
How to avoid: Use Custom Pixels (Settings → Customer Events) for checkout. This is the only sanctioned 2026 path.
Initializing dataLayer AFTER the GTM snippet
What goes wrong: GTM tags fire before your dataLayer values are set. Every conditional trigger that depends on dataLayer (e.g., "fire on product page only") fails. You see tags firing on the wrong pages.
How to avoid: Always paste your window.dataLayer = window.dataLayer || []; line BEFORE the GTM <script> snippet. GTM picks up the push order in real time.
Forgetting to publish the workspace
What goes wrong: You add 8 tags, configure triggers, hit Save on each. Then nothing fires on the live site because you never clicked Submit → Publish at the top-right. Days lost wondering why GTM isn't working.
How to avoid: After any tag/trigger/variable change, click Submit → Publish. Set a version name. The change is live only after Publish, not after Save.
Recap
Done — what's next
How to fire GA4 through Google Tag Manager — without double-counting
Read the next tutorial
Hand it off
Most Shopify operators get GTM partially installed (storefront only) and miss the checkout install for months. By the time it surfaces, ad spend has been optimized against broken data. A Google Tag Manager specialist on EverestX will install correctly across both surfaces, validate every fire path, and document the container. Typically $200-400 one-time at $14-16/hr.
See specialist rates
Yes, if you want anything beyond default GA4 events. The native integration only fires the standard ecommerce events. As soon as you need Meta Pixel, TikTok Pixel, custom conversions, or server-side tagging, you need GTM. Run them in parallel — the native GA4 doesn't interfere with GTM-fired GA4.
checkout.liquid was a Liquid template Shopify Plus stores could edit directly to inject scripts on the checkout pages. Shopify removed it for all stores in August 2024 in favor of Custom Pixels, which run in a sandboxed environment with restricted DOM/window access. Custom Pixels are the only sanctioned way to add tracking to checkout in 2026.
There are GTM apps, but most are wrappers around the same theme.liquid edit you'd do yourself. They add a monthly fee for convenience. If you're comfortable editing theme code (or have a developer who is), skip the app and install directly — it's free, faster, and you keep full control of the container.
GTM itself adds ~30-80ms to first paint. The tags inside GTM can add significantly more if poorly configured (heavy Pixel loads, multiple GA4 properties, unused tags firing). Audit your container quarterly — pause any tag that hasn't fired in 30 days.
Yes for the storefront (theme.liquid is editable on all plans). Custom Pixels are also available on all plans as of 2025. The functionality is the same as Plus; the difference is checkout customization (theme assets in checkout pages require Plus, but tag firing via Custom Pixels does not).
Google Tag Manager
Firing GA4 through GTM is the foundation of every modern analytics stack. Done right, it's one tag and a clean event map. Done wrong, you double-count every event and pollute six months of reports. This is the right way.
Google Tag Manager
Meta doesn't ship a native GTM tag template, so the install is a Custom HTML tag. Done right, this is cleaner than the official Meta pixel-injection method — done wrong, you double-fire every event and the Events Manager fills with junk.
Google Tag Manager
If a tag isn't firing — or worse, firing when it shouldn't — Tag Assistant is the only honest source of truth. Most operators use it wrong. This walks through the workflow specialists actually use.
Google Tag Manager
DIY GTM works fine for simple stacks. It starts breaking down when you need GA4 + Meta + TikTok + Google Ads all firing accurately with deduplication. Here's the honest framework for when to hire.