Unlock Your Shopify Horizon Theme: How to Widen Page Content for a Better Look

Hey there, fellow store owners! As someone who spends a lot of time digging through the Shopify community forums, I often come across common frustrations that many of you face. One of the biggest challenges with pre-built themes, even great ones like Shopify’s Horizon theme, is when you hit a wall with customization. You want your store to look just right, but the theme options don’t quite get you there.

Recently, a thread caught my eye that perfectly illustrates this. Our friend Asa (known as “3rdDay” in the community) was wrestling with the Horizon theme, specifically trying to widen the content area on his pages. He found there was “currently no option of changing the width of the content of a page template,” and he needed to “increase the width of the page Title and Content.” This is a classic example of needing a little custom code to push beyond the theme’s native settings.

The Horizon Theme Width Challenge

It’s a common scenario: you’ve got a beautiful theme, but the default layout for static pages (like your About Us, FAQ, or Contact pages) feels a bit too narrow. You’ve got great content, but it’s all squeezed into a tight column. Asa shared a screenshot of his site, Christian Clothing, highlighting exactly what he was talking about:

He was looking for a way to expand that content area, and thankfully, the community stepped up with a solid solution!

A Community-Powered Solution: Custom CSS to the Rescue

Moeed, a helpful contributor in the Shopify forums, jumped in with a clear, actionable fix. His approach involves injecting a small block of custom CSS directly into your theme’s code. This CSS targets specific elements within the Horizon theme responsible for the page content width and overrides their default styling. Here’s a look at the “before and after” Moeed shared, showing the content area nicely widened:

Step-by-Step: Implementing the Code

Ready to give your pages some breathing room? Here’s how you can implement Moeed’s solution:

1. Backup Your Theme: Seriously, this is crucial! Before making any code changes, always duplicate your theme (Online Store > Themes > Actions > Duplicate). This way, if anything goes wrong, you can quickly revert.
2. Navigate to Theme Code: From your Shopify admin, go to Online Store > Themes. Find your Horizon theme (it should be the “Current theme”), click on Actions > Edit code.
3. Find theme.liquid: In the left-hand sidebar, under the “Layout” directory, click on theme.liquid to open it. This is your theme’s main layout file.
4. Add the Code: Scroll all the way down in the theme.liquid file. You need to paste the following code snippet right above the closing tag. This ensures the styles load after the main content but before the body officially closes.

{% if template == 'page' %}

{% endif %}

A Quick Note on the Code:

• The {% if template == 'page' %} line is a Liquid conditional. It means this CSS will only apply to pages that use the ‘page’ template (which includes your standard ‘page.liquid’ and custom templates like ‘page.about’ or ‘page.faq’).
• @media screen and (min-width: 768px): This ensures the width adjustment only happens on screens wider than 768px (typically tablets and desktops), keeping your mobile view clean.
• width: 60% !important;: This is the magic line! It sets the content area to 60% of its container’s width. The !important tag is used to ensure this custom style overrides any default styles from the theme.

5. Adjust the Width: Moeed wisely noted: “Adjust the width from 60% to however you like.” Don’t be afraid to play with this number (e.g., 70%, 80%, 90%) until it looks perfect on your pages.
6. Save and Check: Click “Save” and then visit your store’s pages to see the changes!

Handling Multiple Page Templates

After Moeed’s initial solution, Asa had a brilliant follow-up question: “What if I have multiple templates: about, eco, faq etc.?” This is a super common and important consideration for anyone with custom page layouts!

The good news is that Moeed’s initial code using {% if template == 'page' %} should actually cover most custom page templates – as long as they are named like page.about.liquid, page.faq.liquid, etc. In Liquid, when you use template == 'page', it checks if the current template’s “name” is ‘page’. For ‘page.about.liquid’, the template.name is still ‘page’, and template.suffix would be ‘about’.

However, if you wanted to apply this style *only* to specific custom templates, or if your custom templates don’t start with ‘page’ (which is less common for static content pages but possible), you could modify the Liquid conditional like this:

Targeting Specific Custom Page Templates

Let’s say you only want this wider layout for your “About Us” page (using page.about.liquid) and your “FAQ” page (using page.faq.liquid), but not for other standard pages. You could change the first line of the code block to:

{% if template.suffix == 'about' or template.suffix == 'faq' %}

{% endif %}

This tells Shopify: “Only apply these styles if the current page template’s suffix is ‘about’ OR ‘faq’.” This gives you incredible flexibility to control exactly which pages get the wider treatment.

Important Considerations Before You Dive In

• Always Test: After making any code changes, always test your site thoroughly on different devices and browsers to ensure everything looks and functions as expected.
• Impact of !important: While !important is useful for overriding theme defaults, overuse can make future styling more difficult. Use it judiciously.
• Understand the CSS: The selectors (like main .section.page-width-content.color-scheme-1) are specific to the Horizon theme. If you ever switch themes, this code might not work, or it might need adjustments.
• Future Theme Updates: Shopify theme updates can sometimes overwrite custom changes or break them if the theme’s underlying structure changes. Keep an eye on your site after any theme updates.

It’s fantastic to see the community come together to solve these kinds of design challenges. While Shopify themes offer a great starting point, a little custom CSS – often shared and refined by helpful experts like Moeed – can truly unlock your store’s full potential. Don’t let a default setting limit your vision; with a few lines of code, you can often achieve the exact look and feel you’re going for!