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.

Follow the steps below if you'd like your page.studio template to use this wrapper.

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 Actions button, then click Edit code.

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="//studios.cdn.theshoppad.net/pagestudio/blocks.css?v={{ page.metafields.global.version | default: 3 }}&shop={{ shop.permanent_domain }}" rel="stylesheet" type="text/css"/>
<script src="//studios.cdn.theshoppad.net/pagestudio/pagestudio.dist.js?v={{ page.metafields.global.version | default: 3 }}"></script>
<div class="studioengine">{{ page.content }}</div>

7. Save your changes.