Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi! I have a question about using iframes in app embed blocks in a theme extension app. I created an app embed block with an <iframe> tag and some css styling in a <style> tag. It's supposed to be like a modal that overlays the way a dialog box would. But, for some reason it never displays in the test store (on firefox or brave). The weird part is that if I put some other <div> tag with some text in the app embed bloc .liquid file it does show up on the store. It's just the iframe. Does anyone know might cause this? Are iframes not allowed as app embed blocks? It's a simple piece of code:
<iframe id="iframe-modal" class="iframeStyling" src="<the-url-to-a-hosted-page>" allow="clipboard-read; clipboard-write"></iframe> <style> .iframeStyling{ width: 60vw; height:60vh; margin-left: 20vw; overflow: hidden; border-radius: 25px; border-color:black; border: 0.1rem; border-style: solid; z-index: 100; position: fixed; margin-top: 0vh; } @media (min-width: 1024px) { .iframeStyling{ margin-left: 30vw; width: 40vw; } } </style> {% schema %} { "name": "modal-widget", "target": "body", "settings": [] } {% endschema %}
Another weird thing which might be unrelated -- sometimes it doesn't even show up on the console if I do document.getElementById("iframe-modal") . Refreshing the page may fix it but it's a 50/50 chance. There's some sort of randomness there that I dont' understand. That could be a separate issue?
Solved! Go to the solution
This is an accepted solution.
Solved -- the issue was that the url in the iframe was an http link and not an https link. I had to also change some css
This is an accepted solution.
Solved -- the issue was that the url in the iframe was an http link and not an https link. I had to also change some css
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025