Theme App Extension Modal Formatting

Retired Boards Appdev Extensions
, ,

Topic summary

  • A theme app extension modal triggered from a PDP (product detail page) renders inconsistently: sometimes full-page and centered, other times squished to the right and cluttered.

  • Suspected cause: the modal inherits CSS from parent theme containers, which varies by where the extension block is placed (e.g., near Add to Cart vs elsewhere).

  • Shopify staff acknowledged the issue, said they would consult the product team, and requested concrete examples of the behavior.

  • Another developer confirmed the same problem and provided screenshots; these images are central, showing correct vs constrained layouts.

  • Workaround shared: on button click, append the modal container to document.body and set display:none before appending, then open the modal. This isolates the modal from theme-level CSS and normalizes its positioning across themes.

  • Outcome: Practically resolved via the community workaround; no official platform fix or guidance has been posted. The discussion appears concluded pending any Shopify follow-up.

Summarized with AI on December 23. AI used: gpt-5.
1

My theme app extension is a simple button that when added to the PDP and clicked by the shopper causes a modal to pop up with a basic 3-pane flow (e.g. put in an email, body weight, height, etc.).

One issue I keep seeing across merchants is that the modal sometimes correctly displays across the full page and centered while on others it gets squished into the right hand side of the page and looks cluttered.

I believe this is because the css of the modal is inheriting from parent divs automatically set by various shopify themes depending on where the merchant places the theme app extension block (i.e. my button: is it next to the Add to Cart button vs placed somewhere else).

If this is true, this may mean that I can’t fix this with basic css changes so I’m wondering what the workaround is within shopify extension apps? It seems like a simple ask but has turned out to be very tedious.

2

Hi Time,

This does sound like an unusual issue - I’ve connected with our product team on this and will update asap.

3

Hi again Tim - could you share an example of where this behaviour is happening?

4

Was this ever resolved - we are having an identical issue

Screen Shot 2024-07-26 at 8.22.36 AM.png
Screen Shot 2024-07-26 at 8.22.36 AM.png3530×1148 792 KB

Screen Shot 2024-07-26 at 8.22.09 AM.png
Screen Shot 2024-07-26 at 8.22.09 AM.png2426×1894 445 KB

5

Resolved this issued by appending the modal to the body and ensuring the display: none; is set on the container when the append occurs. Looks like this…

const iwtModalButton = document.getElementById('iwtModalButton');
  if (iwtModalButton) {
    iwtModalButton.addEventListener('click', async function() {
      const modalContainer = document.getElementById('iwt-modal-container');
      if (modalContainer) {
        modalContainer.style.display = 'none'; // Ensure modal is hidden initially
        document.body.appendChild(modalContainer); // Move modal to the end of the body
      }
      await openOfferModal();
    });
  }
1 Like