Checkout Extensibility Upgrade AMA: Custom Web Pixels with Domaine

Topic summary

Domaine’s Director of Engineering, Connor Munro, hosted an AMA (July 22-26) on Shopify’s custom web pixels for checkout extensibility upgrades. The discussion covered technical implementation challenges and solutions:

Key Technical Issues Addressed:

  • Missing checkout_completed events for some clients, with reports of 30% missing orders in stores running multiple pixels
  • Pixel firing delays (3-7 seconds) causing tracking gaps when users quickly navigate away
  • Custom pixels run in sandboxed iframes, preventing DOM manipulation and external script loading
  • Order count endpoint (init.data.customer.OrdersCount) incorrectly returning zero
  • Sandbox URL parameters polluting analytics tracking
  • Google Tag Manager preview mode incompatibility with Shopify’s sandbox environment

Important Clarifications:

  • Web pixels are for tracking only, not DOM manipulation—UI extensions needed for functionality changes
  • App pixels (web workers, off main-thread) offer better performance than custom pixels (iframes, main-thread)
  • Pixels don’t fire on new customer account order status pages (support in development)
  • checkout_completed fires only once regardless of page reloads
  • Product data accessible via data.checkout.lineItems
  • Customer order count available through init object
  • Shopify developing runtime error reporting for custom pixels
  • Google migrating native app to web pixels with consent mode v2 support by end of August

Migration Guidance:

  • checkout.liquid deprecated by August 13th deadline
  • Recommended: implement pixels through Customer Events area for security and privacy compliance
  • Can revert to checkout.liquid anytime before deadline
  • Custom pixels can access cookies and local storage on top-level frame

Several participants reported ongoing debugging challenges without proper preview tools.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.

Hello, thanks for this.

My questions are as follows:

  1. So the Thank You and Order Status pages are going to be deprecated a year later but we have code blocks as such in the checkout.liquid file which is shared across all the current checkout pages:
{% if downcasedPageTitle contains 'thank you' %}
...
{% endif %}

Does this mean that they will continue to work while the rest will stop working? I am confused about this because there is no dedicated liquid file for Thank You and Order Status pages that I know of.

  1. Does the custom pixels only work for analytics, conversion tracking code only? For example, I have some 3rd party scripts in the checkout.liquid file that I want to carry over, but although they seem to load fine when I test with the Pixel Helper, it doesn’t function as expected. Here is an example from the address validator script that we use:

which turned into:

const loadAddressValidatorScript = () => {
  const head = document.head;
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src='https://{OUR-ID-HERE}.cloudfront.net/pobox_checker.js';
  head.appendChild(script);
};

analytics.subscribe("checkout_started", event => { 
  loadAddressValidatorScript();
});​

Is there anything wrong with the above migration? I know there are app blocks that does address validation and we have looked into them but we prefer to keep the same functionality that we have in prod if it is possible.

  1. We can revert anytime before the August, 13th deadline right? And when we revert all the checkout.liquid code will be preserved. I am asking this because we are having hard time testing the GTM tags in staging and we can simply test them in production and revert if we notice any issues.

Thank you very much,

Ilke