I am redesigning several pages on my Shopify site, Casa Carlini—including About, Imprints, Submissions, Support, and Start Here—with more editorial layouts, images, and card grids.
My current theme keeps regular Pages inside a very narrow content area. This causes the new sections to look squeezed, especially image grids and two-column layouts. Changing the width inside the Custom Liquid/HTML itself does not fully solve the problem because the theme’s Page template appears to be constraining the entire content area.
I would like to make these specific pages wider while keeping normal Pages on the site at their current, narrower reading width.
The layout and width I am trying to achieve are similar to the design used on my site’s existing Author page. I would like these selected editorial pages to have that same wider, more flexible presentation without changing the rest of the site.
What would be the best approach?
Should I create a separate Page template for these editorial pages?
Should I create a new reusable section instead of using Custom Liquid within the standard Page template?
Is there a way to widen the page container only for selected pages, without affecting the whole website?
I also want the result to remain responsive and look correct on mobile.
My goal is not a completely full-width site. I just need a wider, more flexible layout for a small group of image-led landing pages that matches the visual width of the existing Author page.
Thank you for any guidance on the cleanest, most maintainable way to do this.
The cleanest approach is a separate JSON page template plus a reusable section. I would not widen the standard Page template, and I would not make page-handle CSS the primary solution.
Duplicate the current Page template as something like page.editorial.json.
Add a reusable editorial section to that template. Give the section its own wrapper and max-width setting so the layout is scoped to this template.
Assign the editorial template only to About, Imprints, Submissions, Support and Start Here under each page’s Theme template setting.
If the Author page already uses a section with the width you want, reuse that section in the new template rather than recreating the container.
A typical target is a centered wrapper with a bounded max width and responsive side padding, while the grid itself collapses from two columns to one on mobile. This keeps ordinary Pages untouched and gives you one place to maintain all editorial layouts.
The exact Liquid/CSS depends on the theme. If you share the theme name/version and the public Author-page URL, I can tell you whether its existing section can be reused or which outer container needs the scoped max-width change.
@casacarlini Before building a new template, check whether you already have one.
You said the Author page is already the width you want. Open that page in the admin and look at the Theme template dropdown on the right side. If it says anything other than default, that template already exists and already has the width you’re after. Assign the same one to About, Imprints, Submissions, Support and Start Here and you’re finished, no code, no new files.
Only worth building something new if the Author page is on the default template, or if its not a Page at all and youve been comparing against a different resource type.
If you do end up creating page.editorial.json, one thing that catches people out. In most OS 2.0 themes the width constraint doesnt live in the template. The template only lists which sections render. The max width sits on the section itself, either in its schema settings or hardcoded on a wrapper class in the sections liquid. So you can duplicate the template, assign it, load the page, and find its exactly as narrow as before. Thats normal, and the fix is in the section, not the template.
Small correction on the template suffix approach above, since the snippet has a few typos and someone will copy it. Correct form is:
liquid
{% if template.suffix == 'editorial' %}
<style>
/* scoped css here */
</style>
{% endif %}
That works and its a reasonable quick fix, but be careful what you target. Plenty of themes use the same container class for the header and footer as they do for page content, so a broad max width override can widen things you didnt mean to touch. Scope it to a selector inside the main content area rather than the shared container.
Nice one. Worth one quick check on mobile before you call it done.
When people break out of a theme container, its usually with 100vw or a negative margin trick. Both work, but 100vw includes the scrollbar width, so on desktop you often get a horizontal scrollbar appearing, and on mobile you can end up able to swipe the page sideways slightly. Easy to miss because it looks fine at a glance.
Load one of the new pages on an actual phone and try swiping left and right. If it moves at all, thats what happened, and its a small fix rather than a rethink.
Other thing, if the css ended up pasted into each page rather than sitting in the theme, youve now got five copies to keep in sync. Worth pulling it into one place while its still fresh in your head.
In Horizon, width is set per section. Your typed page body sits in the one section that has no width control, so it’s locked to a narrow reading width. That’s why changing the width inside your HTML doesn’t help.
The clean, maintainable way, that keeps normal Pages narrow:
Make a template for these pages only.
Content > Pages > open the page. Under Template, choose Create template and name it “editorial”.
Assign that same template to About, Imprints, Submissions, Support and Start Here. Everything else stays on Default page.
The Custom Liquid section only lives on the editorial template, so it only affects those pages. Only the page body uses that class, so your header and footer are untouched.
Mobile stays correct.
This uses a fixed centered width, not 100vw or a negative-margin trick, so there is no horizontal scrollbar on desktop and no sideways swipe on mobile.
It collapses to one column on small screens on its own.
Shortcut: if your Author page already uses a wider template, skip the build. Just assign that same template to the five pages under Pages > Template.
If you’d rather build wide editorial pages without code, page builders like PageFly, Shogun or GemPages are an option.
I checked your live site and you’re on Horizon 4.1.3, which makes this easy, because Horizon controls width at the section level rather than burying it in the page template.
The flow is: Online Store, Customize, open any of those pages, then in the template picker at the top choose Create template, name it something like “editorial”, and it starts as a copy of your default page.
Sections you add there have their own width and layout settings, and Horizon’s nested blocks handle card grids and two-column layouts natively, so you likely don’t need Custom Liquid at all.
Assign that template to About, Imprints, Submissions, Support and Start Here from each page’s Theme template dropdown in the admin, and the rest of the site never knows it happened.
If a section still won’t go as wide as your Author page, check its own settings first, since most Horizon sections carry a width or “full width” control per section. That’s the level the constraint lives at, not the HTML you paste in.
If this does the trick, please mark it as solved to confirm for the next person on Horizon who hits the same wall!
