Shopify Page Template: Make Selected Pages Wider

The problem

A merchant asked about this on the Shopify Community, and it is one of those layout problems that looks simple and turns out to be about how the theme is built.

They were redesigning a handful of pages with more editorial layouts: image grids, two-column sections, card layouts. About, Imprints, Submissions, Support and a Start Here page. The trouble was that their theme keeps ordinary Pages inside a narrow reading column. On a normal blog-style page that narrow measure is good for reading. On an image-led landing page it looks squeezed, and the grids and columns feel cramped.

They had already tried the obvious thing: setting a width inside their own Custom Liquid or HTML. It did not fully work. The page kept constraining the whole content area no matter what they put inside it.

They wanted three things at once:

• Make these specific pages wider.
• Keep every other Page at its normal, narrower width.
• Stay responsive and correct on mobile, and not go completely full width.

I reproduced this on a Horizon store. Here is the narrow page body with some editorial content dropped in. Notice how the content sits in a thin column with wide empty margins on both sides.

A Shopify page where the editorial content is locked to a narrow reading column with wide empty margins

That empty space is the whole complaint. The theme is not broken. The width is doing exactly what the theme tells it to do, which is the part worth understanding before you touch anything.

Why editing the HTML does not widen the page

Here is the key idea, and it is the thing that trips most people up.

In modern Shopify themes, width is set per section, not per page. Every section on a page has its own width setting. In Horizon you will see it as a Width control with options like Page width and Full width.

There is one exception, and it is the section that holds your typed page body. That section renders the content you write in the Pages editor. In Horizon it has no width control at all. It is hard-locked to a narrow reading width by a CSS class on its wrapper.

So when you paste a wide layout into your page body or into a Custom Liquid block inside that body, the outer container is still pinned to the narrow measure. Your grid can only fill the space its parent gives it, and the parent is narrow. That is why changing the width inside your own HTML does nothing. You are widening a child inside a box that will not grow.

Once you see it that way, the fix is obvious. You either move the content into a section that does have a width control, or you widen the locked container itself. And you do either one on a template that only these pages use, so the rest of the site is untouched.

First, check if you even need to build anything

Before you create a new template, check whether the width you want already exists somewhere on your store.

The merchant said their existing Author page was already the width they wanted. That is a strong clue. If one page already looks right, open it in the admin and look at the Theme template dropdown on the right side. If it says anything other than Default page, that template already exists and already carries the width you are after.

If that is the case, you are done in one step. Assign that same template to the other pages and stop. No code, no new files.

Only build something new if the Author page is on the default template, or if the page you were comparing against is not actually a Page but a different resource, like a section on the homepage. It is worth two minutes to check, because the cleanest fix is the one you do not have to build.

The clean, maintainable fix

If you do need to build it, here is the approach that keeps normal Pages narrow, stays responsive, and lives in one place you can maintain. I tested every step on a Horizon store.

Step 1: Create a template for these pages only

Go to Content, then Pages, and open one of the pages you want to widen. On the right you will see a Template section with a dropdown. Open it and choose Create template. Name it something clear like editorial.

You now have a page template called page.editorial that these pages can use while every other Page stays on Default page.

Creating and assigning a new page template from the Shopify Pages editor

Assign that same editorial template to each page you want wide. In the merchant's case that was About, Imprints, Submissions, Support and Start Here. Everything else keeps the default template and its normal width.

This is the part that answers the real question. A separate template is what scopes the change. Nothing you do to the editorial template can touch a page that is still on Default page.

Step 2: Widen just that template

Now go to Online Store, then Themes, then Customize, and switch to the editorial template. Add a section, and choose Custom Liquid. Paste this into it and Save:

<style>
  .page-width-content { --page-content-width: 1100px; }
</style>

Change 1100px to whatever width you want. That single value is the one knob you adjust.

Adding a Custom Liquid section on the editorial template and pasting the width CSS

Two things make this safe and tidy.

First, this Custom Liquid section only exists on the editorial template. It only loads on the pages that use that template. Your normal Pages never see it, so they stay narrow. You did not have to wrap the CSS in a theme-suffix check or worry about it leaking. The template is the scope.

Second, this uses the theme's own width variable rather than a blunt override. Only the page body uses that class, so your header and footer keep their own widths and are untouched. That matters, because a lot of themes reuse the same container class for the header, the footer and the page content. A broad width override can quietly widen things you never meant to touch. Targeting the page body class avoids that.

Here is the same page on the editorial template. The content now uses the wider width, the two columns have room, and the image grid is much larger.

The same Shopify page now using a wider editorial width, with roomy columns and a larger image grid

On the store I tested, the page body went from 672 pixels wide to 1100 pixels, still centered, still responsive.

The no-code alternative: build with full-width sections

There is a second route that uses no code at all, and it is worth knowing.

Because width in these themes is a per-section setting, you can skip the page body entirely. Instead of typing your editorial content into the page body, build it out of sections on the editorial template: an image-with-text section, a multi-column section, a Custom Liquid section, and so on. Each of those sections has a Width control, so you set them to Full width or to whatever bounded width you like.

This keeps everything in the theme editor, gives you drag-and-drop control, and collapses to one column on mobile on its own. The trade-off is that your content now lives in the theme customizer rather than in the Pages editor. For image-led landing pages that is often exactly what you want anyway.

Pick whichever matches how you like to work. The CSS route widens the body you already typed. The sections route rebuilds the page out of blocks you can position. Both are scoped by the same editorial template, so both leave your other Pages alone.

Will it stay responsive on mobile?

Yes, and this is the part that catches people who take a shortcut.

A common way to break out of a theme's container is to use 100vw or a negative-margin trick. Both work at a glance, but 100vw includes the width of the scrollbar. On desktop you often get a faint horizontal scrollbar, and on mobile you can end up able to swipe the whole page sideways a little. It looks fine until someone tests it on an actual phone.

The width-variable approach avoids that entirely. It sets a fixed, centered maximum width, so there is no horizontal scrollbar on desktop and no sideways swipe on mobile. The layout still respects the theme's side padding, and multi-column content still collapses to a single column on small screens. Load one of your new pages on a real phone and try swiping left and right. If nothing moves, you are set.

What about building pages outside the theme?

The merchant's own first instinct was to build the pages entirely outside the theme's constraints, and that is a very natural reaction when the theme fights you.

It can work, but it comes with two hidden costs.

The first is the sideways-scroll problem above. Breaking out of the container usually means one of those full-width tricks, which is where the mobile swipe comes from.

The second is maintenance. If the width CSS ends up pasted into each page rather than sitting in one place, you now have five copies to keep in sync. Change your mind about the width and you are editing five pages. The template approach puts the width in exactly one section on one template, so a single edit updates all of the pages at once.

If you would rather not touch code at all, page builder apps like PageFly, Shogun or GemPages let you build wide editorial pages visually. They are a reasonable option, though for a handful of pages the native template route is lighter and has nothing extra to pay for or load.

What to check if it did not work

• The page still looks narrow. Confirm the page is actually assigned to the editorial template in Content, then Pages. Duplicating or creating a template does not move a page onto it. You have to assign it.
• Only some pages changed. Each page has its own template assignment. Assign the editorial template to every page you want wide.
• The whole site got wider. You probably widened a shared container class or put the CSS on the Default page template. Keep the Custom Liquid section on the editorial template only, and target the page-body class rather than a generic wrapper.
• The width jumps around on mobile. Make sure you used a fixed centered width, not 100vw or a negative margin. Test on a real device.

Template, section, page body: the words that get mixed up

These three terms get used loosely, and the confusion is behind most of the trouble.

• A page template lists which sections render on a page. It is the container. In most modern themes the template itself does not set width. It just says what appears.
• A section is a block on the page: a hero, a multi-column row, a Custom Liquid block. Sections are where the width setting lives. Most sections have a Width control.
• The page body is the content you type in the Pages editor. It is rendered by one special section that, in Horizon, has no width control and is locked to a narrow reading width.

Put together, the rule is simple. Duplicate the template to scope the change, then set the width on a section, because the template only decides what renders and the page-body section will not widen on its own. Once that clicks, making selected Shopify pages wider is a five-minute job, and every other page on your store stays exactly as it was.