Enable full width pages on Page Studio

Follow the steps below on how to add a page template that allows Page Studio pages to stretch the entire width of the browser.

1. Starting from your Shopify dashboard, 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. Locate the Layout folder, then click on the Add a new layout button.

4. Create a new layout from theme called fullwidth.

5. Locate the following code snippet.

{{ content_for_layout }}

6. Remove any surrounding code that wraps the snippet (this code usually prevents pages from stretching the full width).

7. Add the follow code snippet below it and save your changes.

<style>
  body {
    margin: 0;
  }
</style>

8. Locate the Templates folder, then click on Add a new template.

9. Create a new template for page called studio.fullwidth.

10. Replace all the code within the page.studio.fullwidth.liquid file with the following snippet.

{% layout 'theme.fullwidth' %}
<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>

11. Save your changes.

You will now be able to select the page.studio.fullwidth template from the Page Studio dashboard, which will allow the page's content to stretch the entire width of the screen.