Unlock Wider Layouts: Customize Shopify Page Widths for Editorial Content

View original discussion by casacarlini on Shopify Community →

Hey fellow store owners! Let's talk about a common design challenge that recently sparked a great discussion in the Shopify community: how to get those beautiful, wider layouts for specific pages without messing up the rest of your site. Our friend casacarlini from Casa Carlini brought this up, struggling to make pages like 'About' and 'Submissions' wider for more editorial content, image grids, and two-column layouts. The default theme was just too narrow, squeezing everything in.

It's a familiar pain point, isn't it? You want a dynamic, engaging page, but your theme seems to have other ideas. Fortunately, the community really rallied around this, and we've got some fantastic, clean solutions, especially if you're on a modern Shopify theme like Horizon.

Understanding the 'Narrow Page' Dilemma

Casacarlini's issue was that even when adding custom HTML or Liquid with wider elements, the page content remained constrained by the theme's overall page template. As DanielAnderson and Ploqo pointed out, this is because many newer Shopify OS 2.0 themes, like Horizon 4.1.3, control width at the section level. Your main page body often sits within a section that's hardcoded to a narrow reading width, and that's usually where the constraint lives, not in the HTML you paste in.

The goal was clear: get a wider, more flexible layout for a few specific pages, similar to their existing Author page, while keeping the rest of the site's pages at their standard, narrower width. And crucially, it all needed to remain responsive on mobile.

The Community-Approved Solution: Custom Page Templates

The consensus from the community, particularly from kai_xing, Ploqo, and MayraApps, is that the cleanest and most maintainable way to achieve this is by creating a separate page template for these specific, wider pages. This avoids broad CSS overrides that could affect your entire site and keeps your customizations organized.

Ploqo beautifully illustrated the 'before and after' of this transformation:

Before: content locked to the narrow reading width
After: same content at the wider editorial width

Step-by-Step: Getting Wider Pages on Shopify

1. Check for an Existing Wider Template (The Smart Shortcut!)

Before you build anything new, MayraApps wisely suggested checking if you already have a template with the desired width. Casacarlini mentioned their Author page had the right look. So, first:

  1. Go to your Shopify Admin: Content > Pages.
  2. Open the page that already has the width you want (e.g., your Author page).
  3. Look at the Theme template dropdown on the right side. If it says anything other than 'Default page', that template already exists and has the width you're after.
  4. If so, you're in luck! Simply assign this existing template to your other target pages (About, Imprints, etc.). No code, no new files needed! Fonike939 confirmed this was the quickest and cleanest way.

2. Create a New Custom Page Template (If You Need One)

If your Author page is on the default template, or if you want a completely new layout, you'll need to create a fresh template:

  1. In your Shopify Admin, go to Content > Pages.
  2. Open any of the pages you want to make wider (e.g., 'About').
  3. On the right side, under 'Theme template', click Create template.
  4. Give it a descriptive name, like "editorial", and it will start as a copy of your default page template.
  5. Now, assign this newly created "editorial" template to all the pages you want to widen (About, Imprints, Submissions, Support, Start Here). The rest of your site will remain unaffected.
Create and assign the editorial template in Pages

3. Widen the Content Area for Your New Template

This is where we actually adjust the width. Ploqo provided a super clean method for themes like Horizon:

  1. Go to Online Store > Themes > Customize.
  2. At the top of the Customizer, use the template picker dropdown to switch to your new "editorial" template.
  3. In the left sidebar, click Add section.
  4. Choose the Custom Liquid section.
  5. Paste the following code into the Custom Liquid box and click Save:
  1. You can change 1100px to your desired width. This specifically targets the .page-width-content variable, which Horizon themes use to control the content area width.
Add a Custom Liquid section and paste the width CSS

Alternative: Using template.suffix for CSS (More Advanced)

AsadRayat and MayraApps discussed another way to inject scoped CSS using Liquid's template.suffix. This is a bit more advanced and involves editing your theme's core files, but it's good to know:

  1. Go to Online Store > Themes > Actions > Edit code.
  2. Locate a relevant CSS file or a file like theme.liquid.
  3. You can then add a conditional CSS block like this (corrected by MayraApps):
{% if template.suffix == 'editorial' %}