Horizon Theme Product Images: Shrink for Better Layout

Hey there, fellow store owners! Ever found yourself staring at your Shopify product page, thinking, "Wow, that product image really dominates the screen?" You're not alone. This is a super common challenge, especially with modern themes like Horizon that aim for bold visuals. I recently followed a fantastic discussion in the Shopify Community where a store owner, cpryor, was grappling with this exact issue: how to make product images smaller on the Horizon theme to give more room to product descriptions and details.

It's a classic balancing act, isn't it? You want stunning visuals, but you also need to convey crucial information without endless scrolling. Let's dive into the community's collective wisdom and see how we can tackle this.

The Horizon Theme's Default Product Layout: A Big Picture Problem

cpryor's main concern was that the default product page layout in Horizon dedicates a significant amount of space to the product image, often in a 2-to-1 ratio (image taking up twice the width of the text). This can push important product details below the fold, especially for products with longer descriptions. As Ploqo, a very helpful community member, pointed out, Horizon sets this split with a CSS rule like this on wider desktops:

.product-information__grid:not(.product-information__grid--half,.product-information--media-none).product-information--media-left {
  grid-template-columns: 2fr 1fr;
}

That 2fr 1fr means the image column is twice the size of the text column. Understandable why cpryor wanted to change it!

The good news is, there are a couple of excellent ways to adjust this, starting with the simplest options first.

Solution 1: The No-Code Route (Always Try This First!)

Before you even think about diving into code, always check your theme editor's built-in settings. This is a golden rule, and both Ploqo and Maximus3 rightly highlighted this. Changes made here are generally safer, easier to manage, and survive theme updates, which is a huge plus!

Adjusting Column Widths with "Equal Columns"

Horizon actually has a setting that can immediately give you a more balanced look:

Go to your Shopify Admin and navigate to Online Store > Themes.
Click "Customize" on your Horizon theme.
On your product page template, click on the "Product information" section in the left sidebar.
Look for a toggle called "Equal columns". Turn this ON.

This simple toggle will take your layout from the default 2-to-1 to a much more balanced 50/50 split, giving your product details significantly more breathing room. Ploqo also advised to "Leave Limit product details width off" if you want the text column to be wider, which is often the goal here.

Here's a visual of where to find that setting:

Solution 2: Custom CSS for Finer Control

What if 50/50 isn't quite right? Maybe you want the image even smaller, say 40% or 30%? This is where custom CSS comes in. cpryor initially ran into some snags with CSS, including "invalid CSS" errors and changes not sticking after saving. This is common when dealing with theme overrides!

The Custom CSS Snippet

For a custom ratio, you'll want to add this CSS:

@media screen and (min-width: 990px) {
  .product-information__grid.product-information--media-left {
    grid-template-columns: 40% 1fr !important;
  }
}

Let's break down why this works and how to implement it correctly:

@media screen and (min-width: 990px): This is a "media query" that ensures your changes only apply on desktop screens (990px wide or more). This prevents your product image from becoming tiny on mobile, where columns typically stack. As HotspotStudio wisely noted, "Don’t remove the @media line, that’s the part keeping this desktop-only."
.product-information__grid.product-information--media-left: This targets the specific grid layout for product information when the media is on the left side.
grid-template-columns: 40% 1fr !important;: This is the magic!
- 40%: This sets the width of your product image column. You can adjust this percentage to make the image smaller or larger (e.g., 30%, 50%).
- 1fr: This tells the other column (your product details) to take up the remaining available space.
- !important: This is crucial! As Ploqo and HotspotStudio explained, Horizon uses inline styles and CSS variables that can override your custom CSS. Adding !important forces your rule to take precedence.

Where to Put Your Custom CSS (and Why it Matters)

cpryor's initial issue with the CSS disappearing after saving was likely because it was placed in the section's Custom CSS box. HotspotStudio recommended moving it to Theme settings > Custom CSS, and this is the best practice for store-wide CSS overrides.

From your Shopify Admin, go to Online Store > Themes.
Click "Customize" on your Horizon theme.
In the bottom left corner, click the Theme settings icon (it looks like a cog or gear).
Select "Custom CSS".
Paste the code snippet into this box.

Important Note: If you use this custom CSS, remember to turn OFF the "Equal columns" setting from Solution 1, otherwise, the two rules will conflict!

Here's where you'd typically find the Custom CSS box:

Common CSS Gotchas to Watch Out For

The community thread highlighted a couple of really tricky issues that can cause CSS not to work:

Double Hyphens vs. Long Dashes: Ploqo and HotspotStudio both pointed out that text editors (especially on Macs) can sometimes auto-correct two plain hyphens (--) into a single long dash (—). The class name product-information--media-left needs two plain hyphens. If your code isn't working, try re-typing those hyphens by hand!
The @media Wrapper: If you get an "invalid CSS" error, double-check your braces. The @media rule acts as a wrapper, so if you delete the opening @media (...) { line, you also need to delete one of the closing } braces at the bottom. Otherwise, you'll have an unbalanced set of braces, leading to an error.
Media Position: If you've set your "Media position" to "Right" in the Product information section settings, you'll need to change --media-left in the CSS to --media-right to ensure the rule applies correctly.

Beyond Width: Taming Image Height

While the discussion started with image width, Ploqo brought up another excellent point: sometimes the image isn't just too wide, it's also too tall, leading to excessive scrolling. This is another area where the theme editor offers powerful no-code solutions:

In the theme editor, click the "Product media" block (it's usually nested under "Product information").
Look for "Aspect ratio". If it's on "Auto," tall photos will stay tall. Try setting it to "Square" or "Portrait" to standardize your image heights.
Turn on "Constrain to screen height". This is a fantastic feature that prevents any single image from being taller than the user's screen, drastically reducing scroll.
Consider switching the "Type" from "Grid" to "Carousel". This makes all your product photos share one frame, preventing them from stacking endlessly down the page.

These settings for image height can often make an even bigger impact on perceived page length than just adjusting the width, and they require absolutely no code!

Here's a look at those critical height and display settings:

So, whether you're looking to start your own Shopify store or just fine-tuning an existing one, remember that a well-designed product page can make a huge difference in conversions. It's all about providing a seamless experience for your customers. By leveraging both the built-in theme settings and a bit of carefully applied custom CSS, you can strike that perfect balance between compelling visuals and clear, concise product information. Big thanks to cpryor for raising the question and to the community members like Ploqo, HotspotStudio, and Maximus3 for sharing such valuable, actionable advice!

Optimizing Product Image Layout on Shopify's Horizon Theme: A Community Deep Dive