Solved

Custom modal window brakes in some themes

kateryna_p
Shopify Partner
1 0 0

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. 

 

Screenshot 2023-11-21 at 16.05.25.png


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

Would appreciate any help here!
Thanks,
Kateryna

Accepted Solution (1)

SBD_
Shopify Staff
1829 269 407

This is an 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

Scott | Developer Advocate @ Shopify 

View solution in original post

Reply 1 (1)

SBD_
Shopify Staff
1829 269 407

This is an 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

Scott | Developer Advocate @ Shopify