Showing Storefront in iframe in my App like Shopify Customizer

Jurgen_Feuchter
Shopify Partner
223 1 25
Hello People I have an interesting question.
At my company we have an app where we have a page like the Shopify customizer but to customise our app design and so on. The problem is; not all scripts are loading on the iframe when we call the customers site. After digging this is because Shopify prevents certain scripts to be loaded on iframes from storefronts. We notice that Shopifys’ iframe in the customiser has a frame_token which allows all scripts from the clients store to be loaded in the iframe. When we use this frame_token our iframe loads all scripts as well, but since its refreshed each time we load, its not a fix. The question is, does anyone know how to generate this frame_token which looks like this in the Shopify customiser:

 

<iframe id="theme-editor-iframe" class="te-iframe" data-src="https://store.myshopify.com/?_sc=1&amp;design_theme_id={{theme_id}}&amp;frame_token={{frame_token}}%3D%3D" scrolling="yes" sandbox="allow-same-origin allow-forms allow-popups allow-scripts allow-modals" tabindex="-1" src="https://store.myshopify.com/?_sc=1&amp;design_theme_id={{theme_id}}&amp;frame_token={{frame_token}}3D%3D">
</iframe>

 

 
We are looking on how to generate the frame_token with the shopify API if possible?
 
Or an alternative to showing a preview of how our app would look in the customers storefront. Preferebly using a UI like Shopifys' Customiser. 
 
Any ideas? 
Entrepreneur, Developer, Geek, Gamer and very passionate about WEB development! :P

Need help with your Shopify Store? Contact me: jfeuchter@gmail.com :D
0 Likes