Custom modal window brakes in some themes

[kateryna_p]

Hello!

I wonder if there is a right way to add a modal window into my extension code (which is a part of my Shopify app). This app is supposed to be inserted into the merchant's online store through theme customization. But most of the themes have this html parent element (see the screenshot) that is in the way of the modal window to be visible and above all other elements. Once I drag html element that includes my embedded app above this ".page-width" element - my modal window works just fine. 

 

Is there a way of adding such modal windows so it works in all themes?

Would appreciate any help here!
Thanks,
Kateryna

[SBD_ · Accepted solution]

Hey @kateryna_p 

Looks like the schema has a target attribute to control where the code is injected. 

> The value for app blocks is section. The values for app embed blocks are head and body.

https://shopify.dev/docs/apps/online-store/theme-app-extensions/extensions-framework#schema