We have the same question, except we want to trigger the popup via a Checkout UI Extension app block. Any help here would be appreciated!
Topic summary
Creating a click-triggered popup in a Shopify theme app extension for a product page, ideally as a full-page overlay (possibly iframe) with open/close on click.
-
Initial attempt: A section (size-chart.liquid) plus a JS function (size-chart.js) to center and toggle a popup. Error “myFunction is not defined” occurred due to using
export default; removing it fixed the error, but the popup didn’t appear as an overlay—only text in a span toggled and remained confined to its block, not centered. -
Key questions raised: Whether a theme app extension must be connected to an embedded app to achieve a full-page overlay, and whether a Checkout UI Extension app block can trigger such a popup. These were not answered in-thread.
-
Outcome: The OP achieved a working solution by using JavaScript to toggle a hidden CSS class to show/hide the popup. No details on implementing an iframe or ensuring page-wide centering/overlay behavior were provided.
-
Status: Partially resolved (product page popup works via CSS class toggle). Checkout-triggered popup and embedded-app linkage remain open.
Notes: Theme app extension = app-provided blocks/sections on the storefront. Checkout UI Extension = extension to customize checkout UI.