Enable full width pages

Follow the steps below 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 the  ... button, then click Edit HTML/CSS.

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.

<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="//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>

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.

Still need help? Contact Us Contact Us