Why are my pages so wide?

By default, the page.studio template doesn't inherit your theme's code that wraps around the content of a page. This can cause issues if your theme depends on this wrapper code for the width of the page. If you'd like your page.studio template to use this wrapper, follow the steps below.

1. Starting from your Shopify admin, click on  Online Store, then click on Themes.

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

3. On the left side, under the Templates heading, locate the page.liquid and page.studio.liquid files.

4. Copy all the code inside the page.liquid file, and replace the page.studio.liquid file with it.

5. Locate the following line of code in your page.studio.liquid file:  {{ page.content }}

6. Replace it 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>

7. Save your changes.

Still need help? Contact Us Contact Us