# Enable full-width pages

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**, **Themes**, then **Edit code**.

<figure><img src="https://2399025339-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Flklrekxvi2ofo3eXbyBY%2Fuploads%2FlAHivr2tfddqvm8GtAkF%2FPS-enable-full-width-pages.png%20-%20Step%202.png?alt=media&#x26;token=36ef3e01-decd-4aa1-855b-90ed00b99855" alt=""><figcaption></figcaption></figure>

2. Locate the **Layout** folder and click on the folder icon to add a new layout button called *fullwidth*.

<figure><img src="https://2399025339-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Flklrekxvi2ofo3eXbyBY%2Fuploads%2F6qiO8jSU50PtliP9xIgW%2FPS-enable-full-width-pages.png%20-%20Step%206.png?alt=media&#x26;token=4167a3be-9e3b-4c1d-a4ab-7e00836a71aa" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2399025339-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Flklrekxvi2ofo3eXbyBY%2Fuploads%2Fyf3od9RXgP0WGo8mPSAq%2FPS-enable-full-width-pages.png%20-%20Step%207.png?alt=media&#x26;token=ddd7d433-0166-4c1a-b122-cd89114fd731" alt=""><figcaption></figcaption></figure>

3. Locate the following code snippet below in the **theme.liquid** file.

```html
{{ content_for_layout }}
```

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

***Before***

<figure><img src="https://2399025339-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Flklrekxvi2ofo3eXbyBY%2Fuploads%2F57kXZaYJkbKCCPLzkWIm%2FPS-enable-full-width-pages.png%20-%20Step%208.png?alt=media&#x26;token=aa14d881-1878-4bcf-994f-8cdd8f89271f" alt=""><figcaption></figcaption></figure>

***After***

<figure><img src="https://2399025339-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Flklrekxvi2ofo3eXbyBY%2Fuploads%2FNYxympE11S1RvpwqedYI%2FPS-enable-full-width-pages.png%20-%20Step%209%20(1).png?alt=media&#x26;token=2a27e0b9-36ba-4202-a5fe-c29d986b8ea2" alt=""><figcaption></figcaption></figure>

5. Add the following code snippet below it and save your changes.

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

<figure><img src="https://2399025339-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Flklrekxvi2ofo3eXbyBY%2Fuploads%2F5rObtmv7GWua8TcHZVUz%2FPS-enable-full-width-pages.png%20-%20Step%2010.png?alt=media&#x26;token=c43b773e-835b-41e8-a9ce-8cd06875853d" alt=""><figcaption></figcaption></figure>

6. Now locate the **Templates** folder, then click on the folder icon to add a new template for a page called *studio.fullwidth*.

<figure><img src="https://2399025339-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Flklrekxvi2ofo3eXbyBY%2Fuploads%2FjAV66YBGLtOa73Qj73PU%2FEnable%20Full%20Width%20Pages%20on%20Shopify%20Theme%20-%20Step%209.png?alt=media&#x26;token=d6c86543-df69-4d94-a257-45da9ac79fc9" alt=""><figcaption></figcaption></figure>

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

```html
{% 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.

![](https://2399025339-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Flklrekxvi2ofo3eXbyBY%2Fuploads%2Fgit-blob-5af6b373c7d9320a5fb1d3b9a80715080aeb6e37%2Fdocsassets555e25e4e4b027e1978e1c9aimages5a7e00f12c7d3a4a4198feb1file-d0jordthnn.png?alt=media)
