Theme App Extension Modal Formatting

[timv]

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.

[Liam]

Hi Time,

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

[Liam]

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

[c-e-daly]

Was this ever resolved - we are having an identical issue

[c-e-daly]

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();
    });
  }