Re: Theme App Extension Modal Formatting

Theme App Extension Modal Formatting

timv
Shopify Partner
3 0 0

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.

Replies 4 (4)

Liam
Community Manager
3108 341 880

Hi Time,

 

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

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Liam
Community Manager
3108 341 880

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

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

c-e-daly
Shopify Partner
10 0 3

Was this ever resolved - we are having an identical issue

 

Screen Shot 2024-07-26 at 8.22.36 AM.pngScreen Shot 2024-07-26 at 8.22.09 AM.png

c-e-daly
Shopify Partner
10 0 3

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