Shopify Customer Events Web Pixel: External JS Widget Hidden Inside Web Pixel Sandbox

Web Pixels
1

Hi Shopify Community,

I am developing a Shopify app and need help with loading an external JavaScript widget using Shopify Customer Events Web Pixel.

What I am trying to achieve

I have created a Customer Events Web Pixel to load an external JavaScript file. My goal is to display a widget on:

  • Shopify storefront / Home page

  • Checkout page

  • Thank-you page

Currently, I am using the page_viewed event to trigger the external JavaScript.

Issue

My external JavaScript loads successfully and creates the following element:

<div id="redeal-modal-container">
    ...
</div>

However, when I inspect the page in Chrome DevTools, I can see that this element is created inside:

web-pixels-manager-sandbox-container

This parent container is hidden by Shopify.

The styles appear similar to:

#web-pixels-manager-sandbox-container {
    height: 0px !important;
    width: 0px !important;
    visibility: hidden !important;
    overflow: hidden !important;
}

Because of this, my external JS widget is not visible on the storefront.

What I have tried

  1. Created a Customer Events Web Pixel.

  2. Used the page_viewed event.

  3. Tried creating a Shopify App Extension.

  4. Tested the widget on the storefront home page first.

My questions

  1. Is it possible to display a UI widget created by external JavaScript using Shopify Customer Events Web Pixel?

  2. Is the web-pixels-manager-sandbox-container intentionally hidden by Shopify?

  3. Can a Web Pixel display a modal or popup outside the sandbox container?

  4. If Web Pixels are not suitable for rendering UI, what is the recommended Shopify-supported approach?

  5. Should I use a Theme App Extension, App Embed, Checkout UI Extension, or another extension?

  6. How can I load my external JS and display the widget on the checkout and thank-you pages?

I have attached a screenshot of the Chrome DevTools Elements panel showing the issue.

Any guidance from Shopify developers would be greatly appreciated.

Thank you!

2

Hi,

You’ve hit an intentional design boundary, not a bug. Let me go through your questions directly.

Why your widget is hidden

The Web Pixels sandbox is deliberately isolated. Shopify runs custom pixel code in a restricted sandbox (a hidden container / web worker–style environment) specifically so that pixel code cannot manipulate the storefront DOM. The height: 0; visibility: hidden styling on web-pixels-manager-sandbox-container is intentional and is not something you should work around. Any DOM you create there is meant to be invisible.

So, answering your questions:

  1. Can you display a UI widget via Web Pixels? No. Pixels are for event collection/analytics only.
  2. Is the sandbox container intentionally hidden? Yes, by design — for privacy, performance, and security isolation.
  3. Can a pixel render a modal/popup outside the sandbox? No. The sandbox has no trusted access to the parent DOM, and trying to escape it is unsupported (and will break as Shopify hardens the sandbox).
  4. What’s the recommended approach? Use extensions built for rendering UI (below).

Recommended approach

  • Storefront / Home page: Build a Theme App Extension with an app embed block. App embeds are designed to inject scripts and render widgets/modals site-wide without editing theme code. This is the supported home for your redeal-modal-container widget on the online store. You can load your external JS from the embed block and render into the real page DOM.

  • Checkout page + Thank-you (Order Status) page: Use Checkout UI Extensions. Checkout is a locked-down, sandboxed surface too — you cannot inject arbitrary external JS/DOM there. You must build the UI with Checkout UI Extension components and APIs. The Thank-you and Order status pages are also supported targets. Note that fully custom checkout UI generally requires Shopify Plus.

Practical guidance

  • Keep the Web Pixel only for tracking events (page views, add-to-cart, purchases). It’s the right tool for that, just not for rendering.
  • For checkout, expect to re-implement your modal using Checkout UI Extension primitives rather than loading your existing external JS bundle — external script injection is not permitted in the checkout sandbox.

Documentation

Hope this helps!