Solved

Can't Insert iFrame in an App Embed Block

myobs
Visitor
1 0 0

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?

Accepted Solution (1)

PageFly-Amelia
Shopify Partner
452 144 206

This is an accepted solution.

Hello @myobs 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

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

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

View solution in original post

Reply 1 (1)

PageFly-Amelia
Shopify Partner
452 144 206

This is an accepted solution.

Hello @myobs 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

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

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.