Manually upgrade the page.studio.liquid file

If you installed Page Studio before January 25th, 2016 you'll need to update your page.studio.liquid file to take advantage of several new features now available. Most stores will be able to do this automatically, from within Page Studio. However, if you've modified your page.studio.liquid file you may need to perform these steps to manually upgrade your file.

1. From your Shopify admin, click  Online Store, then click Themes.

2. Find the theme you want to edit, click the   ... button, then click Edit HTML/CSS.

3. On the left side, under the Templates heading, click on page.studio.liquid

4. Inside that file you will find the Page Studio old snippet that looks like this:

<script type="text/javascript">var adjustSandboxHeight = function() { var iframe = document.getElementById('page-studio-sandbox'); iframe.height = iframe.contentWindow.document.body.scrollHeight; };</script> <iframe width="100%" height="400" frameborder="no" allowtransparency="true" allowfullscreen id="page-studio-sandbox" onload="adjustSandboxHeight()" scrolling="no" style="overflow:hidden" srcdoc='<link href="//d2gkxpfclqno3n.cloudfront.net/pagestudio/blocks.css?shop={{ shop.permanent_domain }}" rel="stylesheet" type="text/css"/><base target="_parent"/><div class="studioengine">{{ page.content | replace : "'", '&apos;'}}</div>'> </iframe> <script type="text/javascript"> !function(a,b){var c=window.srcDoc;"function"==typeof define&&define.amd?define(["exports"],function(d){b(d,c),a.srcDoc=d}):"object"==typeof exports?b(exports,c):(a.srcDoc={},b(a.srcDoc,c))}(this,function(a,b){var c,d,e=!!("srcdoc"in document.createElement("iframe")),f={compliant:function(a,b){b&&a.setAttribute("srcdoc",b)},legacy:function(a,b){var c;a&&a.getAttribute&&(b?a.setAttribute("srcdoc",b):b=a.getAttribute("srcdoc"),b&&(c="javascript: window.frameElement.getAttribute('srcdoc');",a.setAttribute("src",c),a.contentWindow&&(a.contentWindow.location=c)))}},g=a;if(g.set=f.compliant,g.noConflict=function(){return window.srcDoc=b,g},!e)for(g.set=f.legacy,d=document.getElementsByTagName("iframe"),c=d.length;c--;)g.set(d[c])});</script>

5. Replace all of the code above with the following snippet:

<link href="//d2gkxpfclqno3n.cloudfront.net/pagestudio/blocks.css?shop={{ shop.permanent_domain }}" rel="stylesheet" type="text/css"/><script src="//d2gkxpfclqno3n.cloudfront.net/pagestudio/assets/shared/js/pagestudio.dist.js"></script><div class="studioengine">{{ page.content }}</div>

6. Save your changes.

Still need help? Contact Us Contact Us