If you followed a Google Tag Manager tutorial written before 2025, half of what you did on your Shopify checkout is quietly broken today. The checkout.liquid file is gone. The "Additional Scripts" box under Settings > Checkout is gone. Shopify Plus merchants lost that flow on August 28, 2025, and non-Plus merchants lost it on August 26, 2026. If your current GTM setup relies on either, your purchase events are not firing.
This is a rebuild guide. We will set up Google Tag Manager on Shopify the way it actually works in 2026: one install for the storefront, one for the checkout, and a real test to prove both are alive.
Why Shopify makes GTM harder than it should be
Think of your Shopify store as two connected buildings.
The storefront is the first building. Product pages, collections, cart, blog posts. This building is yours. You can put GTM here by editing your theme code.
The checkout is the second building. Shopify runs this in a sandboxed environment for security. Your theme code cannot reach it. Whatever GTM container you install in the storefront simply is not loaded when a shopper hits checkout, payment, or the thank-you page.
Before 2025, you worked around this by pasting a second GTM snippet into checkout.liquid or the "Additional Scripts" field. Both of those doors are now closed. The 2026 replacement is Custom Pixels, managed under Settings > Customer events. Custom Pixels run in a sandboxed iframe and communicate with the rest of your tracking stack through postMessage.
In practice, a complete Shopify GTM setup in 2026 is two installations, not one:
-
Standard GTM container in
theme.liquidfor the storefront. - Custom Pixel under Customer events for the checkout and thank-you page.
Skip either half and your data will look wrong in ways you will not notice for weeks.
What you need before you touch anything
- Shopify admin access with permissions to edit themes and manage Customer events.
- A Google Tag Manager account. If you do not have one, sign in at tagmanager.google.com and create a container. Choose "Web" as the target platform and use your store URL as the container name.
- A GA4 property already set up in Google Analytics. Grab the Measurement ID (starts with
G-). Without GA4 in place, none of the tags below will make sense. - Google Tag Assistant browser extension. You will use this to verify the install.
- A test order you can actually place. Use a real payment method with a discount code, then refund. Preview mode is not enough for checkout tracking in 2026.
Everything below assumes you are on Online Store 2.0 with a modern theme like Dawn, or any theme built on the same structure.
Part 1: Install GTM on your Shopify storefront
This covers every page except checkout: home, collection pages, product pages, cart, blog, static pages.
Step 1: Get your GTM snippets
Inside your GTM container, click the container ID at the top (looks like GTM-XXXXXXX). GTM will show you two code blocks. Copy both. The first goes in <head>, the second goes right after <body>.
Step 2: Duplicate your theme before editing
Never edit your published theme directly. In your Shopify admin, go to Online Store > Themes. Find your live theme, click the three dots, and choose Duplicate. Edit the duplicate. If something breaks, you still have a working version to fall back on.
Step 3: Open theme.liquid
On the duplicated theme, click Actions > Edit code. In the left panel under Layout, open theme.liquid. This is the template that wraps every storefront page.
Step 4: Paste the head snippet
Find the opening <head> tag near the top of the file. Paste the first GTM snippet right after it, as high as possible so it fires early.
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->Replace GTM-XXXXXXX with your actual container ID.
Step 5: Paste the body snippet
Scroll down to the opening <body> tag. Paste the second GTM snippet immediately after it. If your theme has an if browser.supports_no_js block near the body tag, paste the GTM snippet above that block.
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->Step 6: Save, preview, and publish
Save the file. Preview the duplicated theme. Open the Tag Assistant extension, connect to your storefront URL, and confirm the container is loading. Once the container fires cleanly on a product page, publish the theme.
Storefront GTM is now live. Everything before checkout is trackable. Now for the harder half.
Part 2: Track checkout and purchases with a Custom Pixel
This is where most Shopify stores lose data. The Custom Pixel is the only supported way to fire tags on checkout and the thank-you page in 2026.
Step 1: Open Customer events
In your Shopify admin, go to Settings > Customer events. Click Add custom pixel, give it a name like "GTM Checkout Pixel", and open the editor.
Step 2: Paste the pixel code
Below is a working starting point. It loads GTM inside the pixel sandbox and subscribes to Shopify's built-in checkout events, pushing them into a dataLayer that your GTM container can pick up.
// Load GTM inside the Custom Pixel sandbox
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
// Purchase event
analytics.subscribe("checkout_completed", (event) => {
const checkout = event.data.checkout;
window.dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: checkout.order.id,
value: checkout.totalPrice.amount,
currency: checkout.currencyCode,
tax: checkout.totalTax?.amount || 0,
shipping: checkout.shippingLine?.price?.amount || 0,
items: checkout.lineItems.map(item => ({
item_id: item.variant.product.id,
item_name: item.title,
price: item.variant.price.amount,
quantity: item.quantity
}))
}
});
});
// Begin checkout event
analytics.subscribe("checkout_started", (event) => {
const checkout = event.data.checkout;
window.dataLayer.push({
event: "begin_checkout",
ecommerce: {
value: checkout.totalPrice.amount,
currency: checkout.currencyCode,
items: checkout.lineItems.map(item => ({
item_id: item.variant.product.id,
item_name: item.title,
price: item.variant.price.amount,
quantity: item.quantity
}))
}
});
});Replace GTM-XXXXXXX with your container ID. Save the pixel. Set customer privacy permissions based on your consent strategy, then Connect the pixel. Shopify will not activate the pixel until it is connected.
Step 3: Confirm the thank-you page is published
There is a subtle Shopify setting that breaks a lot of purchase tracking. Go to Settings > Checkout and confirm the Thank you and order status pages are published under the new checkout extensibility. If they are not, your Custom Pixel has no page to fire on and the purchase event is silently dropped.
Part 3: Configure your first GA4 tag in GTM
You now have GTM loaded in two places. Time to actually fire a tag.
Inside GTM:
- Tags > New > Google Analytics: GA4 Configuration. Enter your Measurement ID. Trigger: All Pages. Save.
-
Tags > New > GA4 Event. Event name:
purchase. Configuration tag: the GA4 tag you just created. Trigger: Custom Event with event namepurchase. Under Ecommerce, tick Send Ecommerce data and set the data source to Data Layer. Save. - Submit the container. GTM changes do not go live until you click Submit and publish a version.
Repeat the pattern for begin_checkout, add_to_cart, view_item, and any other events you care about.
How to test everything without guessing
This is where most stores stop, and where most tracking bugs start. Do not skip this.
- GTM Preview mode. Enable Preview in GTM, connect to your live storefront URL, and browse the site as a shopper. Every tag you expect should fire on the right page.
-
Custom Pixel debugging. Open your storefront in Chrome, open DevTools, and go to the Console. Type
Shopify.designModeand confirm you are in the storefront context. Custom Pixels run in a Lax sandbox, so switch the console context dropdown toLaxto see pixel logs. - Real test order. Place an actual test order end-to-end. Discount to $0.01 or refund after. Do not rely on the order preview.
-
GA4 DebugView. Open GA4 > Configure > DebugView while you place the test order. Confirm one
purchaseevent lands with a uniquetransaction_id. -
Network tab. In DevTools, filter for
collectrequests. You should see one purchase collect request, not two. Duplicates almost always mean you have both the native Google & YouTube app tracking and your GTM tracking firing at the same time.
Common mistakes that ruin the data
- Double-firing purchase events. If Shopify's Google & YouTube app is installed and configured for GA4, and you also fire GA4 through GTM, every purchase gets counted twice. Pick one path. If you want the flexibility of GTM, disable GA4 in the Google & YouTube app.
-
Editing the live theme. One typo in
theme.liquidand your entire storefront can go blank. Always duplicate. - Forgetting to connect the Custom Pixel. The pixel does nothing until you hit Connect. Saved is not the same as live.
- Missing consent handling. If you serve EU or UK traffic, your Custom Pixel and GTM tags need to respect consent state. Configure permissions on the pixel and use Consent Mode v2 in GTM.
- Assuming Preview mode covers checkout. GTM Preview does not run inside the Custom Pixel sandbox. You have to place a real order to verify checkout tags.
-
Ignoring the transaction ID. If
transaction_idis missing or unstable, GA4 will over-count purchases whenever a shopper refreshes the thank-you page.
When to move to server-side tagging
Client-side GTM in 2026 is losing an increasing share of events to ad blockers, Safari's ITP, iOS privacy defaults, and consent rejections. If your store does more than roughly $100k a month in revenue, or if your paid ads depend heavily on conversion accuracy, server-side GTM is now a serious consideration.
Server-side tagging moves the actual data collection off the shopper's browser and onto a container you control on your own subdomain. You will see cleaner attribution, faster page loads, and better Meta CAPI and Google Ads conversion match rates. It is not a beginner setup, but it is where any tracking-serious Shopify brand ends up.
When to hand this to an expert
Setting up GTM is one of those tasks that looks like a checklist and turns into a swamp. You paste a snippet, you place a test order, purchases still do not show, GA4 reports weird numbers, and now you are debugging pixel sandboxes on a Friday night.
If you would rather not do this yourself, we handle Shopify analytics setup end-to-end, from GTM to GA4 to Meta CAPI to server-side. See what a full Shopify tracking and analytics setup looks like when it is done by someone who does it every week.
Frequently Asked Questions
Do I need to be on Shopify Plus to install Google Tag Manager?
No. GTM on the storefront works on every Shopify plan. Custom Pixels for checkout tracking are also available on all plans as of 2026.
Can I still use checkout.liquid for GTM?
No. checkout.liquid was deprecated for Shopify Plus on August 28, 2025, and for non-Plus stores on August 26, 2026. Use Custom Pixels instead.
Will GTM slow down my Shopify store?
Loaded correctly in <head> with async, GTM adds a few kilobytes and does not block rendering. Bloated tag setups inside GTM can slow things down. Keep your tags lean and use triggers, not "All Pages" for everything.
Do I need GTM if I already use the Google & YouTube app?
The app is enough if you only care about Google Ads and basic GA4 reporting. Use GTM when you need multiple pixels (Meta, TikTok, Pinterest, Klaviyo), custom events, or server-side tagging.
How do I test purchase tracking without a real order?
You cannot fully test it without one. GTM Preview does not run in the Custom Pixel sandbox. Place a small real order, verify in GA4 DebugView, then refund.
Where do I put GTM on a headless Shopify store?
On headless setups you inject GTM at the framework level (Next.js, Hydrogen, Nuxt) in your root layout, and you still need the Custom Pixel for checkout since checkout stays on Shopify's domain.
Want a real number for your store?
Send us the URL and the catalog size. We will come back with a fixed quote and the template list it covers, no call required unless you want one.
Get a build quote
