Unlock Wider Content: Customizing Page Width in Shopify's Horizon Theme

Hey everyone,

As a Shopify expert who spends a lot of time digging through the community forums, I often come across discussions that really hit home for store owners. One such thread recently caught my eye, and it’s about a common frustration many of you might share: dealing with page content that feels just a little too narrow in your theme, especially when you want your text and images to breathe a bit more.

The discussion centered around the Horizon theme, a sleek and modern option, but like many themes, it sometimes defaults to a more constrained content width. A store owner, Asa from 3rdDay, was looking to expand the width of their page title and content, finding no direct option in the theme customizer. Sound familiar? It’s a classic scenario where you love your theme’s overall look but need to tweak a specific layout element.

Cracking the Code: Expanding Content Width in Horizon

Thankfully, the Shopify community is a treasure trove of helpful folks! Moeed jumped in with a fantastic, straightforward solution that involves a little bit of custom code. Don't worry, it's not as scary as it sounds, and I'll walk you through it. This approach allows you to inject some CSS to override the default styling and give your content the space it deserves.

Step-by-Step Guide to Adjusting Your Page Width

Here’s how Moeed suggested tackling this, with a few extra pointers from my end:

1. Go to your Shopify Admin.
2. Navigate to Online Store, then Themes.
3. Find your current theme (Horizon, in this case) and click Actions > Edit Code.
4. In the file explorer on the left, find the theme.liquid file. This is your main layout file, kind of like the skeleton of your entire store.
5. Scroll down to the very bottom of the theme.liquid file. You’re looking for the closing tag.
6. Just above the tag, paste the following code snippet:

{% if template == 'page' %}

{% endif %}

A Quick Note on the Code:

• The {% if template == 'page' %} line is crucial. It tells Shopify to only apply this custom styling to pages that use the default page.liquid template. This is great for keeping your other pages (like product pages or collection pages) untouched.
• The @media screen and (min-width: 768px) part means this styling will only apply on screens wider than 768 pixels, ensuring your mobile layout isn't messed up. Smart!
• The magic happens in width: 60% !important;. This is where you control how wide your content actually gets. Moeed used 60%, but you can absolutely change this number to whatever percentage feels right for your design (e.g., 70%, 80%, or even 90% for a nearly full-width look). The !important tag is there to make sure your custom CSS overrides any existing theme styles.

Here’s a visual of what Moeed shared to give you an idea of the impact:

See how much more room that gives your content? It can make a huge difference in readability and visual impact!

What About Multiple Page Templates?

This was a brilliant follow-up question from Asa. Many stores use custom page templates for things like "About Us," "FAQ," "Eco-Friendly Initiatives," or specific landing pages. If you have templates like page.about, page.faq, or page.eco, you'll want this styling to apply to those too, right?

The good news is, it's an easy adjustment. You just need to modify the Liquid condition to include all the templates you want to target. Instead of just {% if template == 'page' %}, you can expand it using or operators:

{% if template == 'page' or template == 'page.about' or template == 'page.eco' or template == 'page.faq' %}

{% endif %}

Just remember to replace page.about, page.eco, and page.faq with the actual names of your custom page templates. You can find these template names by going to Online Store > Themes > Actions > Edit Code, then looking under the "Templates" folder for files starting with page..

A Few Expert Tips Before You Dive In

• Always Duplicate Your Theme First: Before making any code changes, seriously, create a duplicate of your theme. This is your safety net! If anything goes wrong, you can always revert to the duplicate.
• Experiment with Widths: Don’t be afraid to play around with the width: 60% value. Try 70%, 80%, or even 90% to see what looks best for your specific content and brand aesthetic.
• Consider Specificity: While !important is useful for overriding, try to be as specific as possible with your CSS selectors to avoid unintended conflicts. Moeed's selector is quite specific, which is great.
• Check Mobile: Even though the media query targets larger screens, always double-check your changes on various devices (desktop, tablet, mobile) to ensure everything still looks fantastic.

It’s really awesome to see the community come together to solve these common design challenges. This kind of hands-on customization can truly elevate your store's appearance and user experience, giving your content the room it needs to shine. So go ahead, give your Horizon theme pages a little more breathing room, and make your content pop!