Taming the Horizon Theme: How to Resize Product Images for a Perfect Layout

Hey everyone! As a Shopify expert who spends a lot of time digging through community discussions, I often see store owners asking for help with theme customizations that seem small but make a huge difference in user experience. Recently, a thread titled "Horizon theme - Make Product Image Smaller" caught my eye, and it turned into a fantastic conversation about gaining control over your product page layout. Let's dive into what we learned from cpryor and the helpful folks in the community!

cpryor kicked off the discussion, frustrated with how much real estate the main product image consumed on their Horizon theme product pages. They wanted to make the image smaller to give more prominence to the product description and other details. It's a common desire – sometimes the default 2-to-1 image-to-text ratio, where the image is twice as wide as the text, just doesn't fit your product or brand aesthetic.

Here's a peek at what cpryor was dealing with:

The Horizon Theme's Default Layout & Why It Matters

Ploqo, one of our community gurus, explained that the Horizon theme, by default, uses a specific CSS rule for desktops wider than 1200px:

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

This is where that 2-to-1 layout comes from. The image column (2fr) is exactly twice the text column (1fr). Understanding this default is key to knowing how to override it.

Your First Stop: No-Code Theme Editor Options

Before diving into any code, both Ploqo and Maximus3 highlighted the importance of checking the built-in theme editor settings. This is always your best bet because settings survive theme updates, while custom CSS can sometimes break.

Step-by-Step: Using "Equal Columns" for a 50/50 Split

1. In your Shopify admin, go to Online Store > Themes.
2. Click Customize on your Horizon theme.
3. Navigate to a product page.
4. In the left sidebar, click on the Product information section.
5. Look for the Equal columns toggle and turn it On.

This simple toggle will take your product page from the default 2-to-1 layout straight to a clean 50/50 split, giving your text column more breathing room.

Important Note: Leave "Limit product details width" off, as Ploqo wisely pointed out. That option narrows the text column, which is the opposite of what we're trying to achieve here.

When 50/50 Isn't Enough: Custom CSS to the Rescue

If you need more granular control than a 50/50 split – maybe you want the image to be 40% or even 30% of the width – then custom CSS is your answer. HotspotStudio and Ploqo provided excellent guidance here.

Step-by-Step: Adding Custom CSS for Precise Control

1. First, make sure you've turned off the "Equal columns" setting mentioned above, otherwise, the CSS will fight with it.
2. In the theme editor, go to Theme settings > Custom CSS. This is crucial: don't put it in the section's Custom CSS box, as it's applied store-wide from Theme settings.
3. Paste the following CSS code:

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

Let's break down that code:

• @media screen and (min-width: 990px): This is a "media query" that ensures the rule only applies on desktop screens (990px wide or more). Your mobile layout will remain stacked, which is generally ideal. HotspotStudio specifically warned against removing this line, as it would force two columns on phones, leading to tiny images and squashed text.
• .product-information__grid.product-information--media-left: This is the "selector" that targets the specific layout we want to change – the product information grid when the media (images) are on the left.
• grid-template-columns: 40% 1fr !important;: This is the magic! 40% sets the width of your image column. You can adjust this number: lower it for a smaller image, raise it for a bigger one. 1fr tells the text column to take up the remaining space. The !important flag is crucial here; it tells the browser to prioritize this rule over conflicting theme styles, which was a key insight from the thread for making the changes "stick" (cpryor initially had issues with changes reverting).

Here's what a 40% image width looks like:

A Couple of Troubleshooting Tips from the Community:

• Double Hyphens (`--`): Be super careful when copying and pasting the CSS. Some text editors (especially on Macs) might convert two plain hyphens (--) into a single long dash (—). This will silently break your CSS! If your code isn't working, retype the hyphens in product-information--media-left by hand.
• The @media Wrapper: As HotspotStudio explained, @media is a wrapper. If you try to delete just the @media line, you'll end up with an extra closing brace (`}`) at the bottom, causing an "invalid CSS" error. Always make sure your braces are balanced.
• Media Position: If you've set your "Media position" to Right in the section settings, remember to change --media-left to --media-right in the CSS code for it to apply correctly.

Don't Forget Image Height: Optimizing Product Media Blocks

Ploqo brought up another excellent point: sometimes it's not just about the width, but also the height of your product images. Tall images can push a lot of content down the page, regardless of their width. You can address this without any code!

Step-by-Step: Adjusting Product Media Settings

1. In the theme editor, under the Product information section, click on the Product media block.
2. Aspect ratio: If this is on "Auto," tall photos will stay tall. Consider setting it to Square or Portrait to standardize your image dimensions.
3. Constrain to screen height: Turn this setting On. This prevents any single image from being taller than the user's screen, significantly shortening your page.
4. Type: If you have multiple images, switch this from Grid to Carousel. This makes all your product photos share one frame, preventing them from stacking endlessly down the page.

These three settings alone can often shorten your product pages much more dramatically than just adjusting the width, and they require absolutely no code!

It's great to see how the community came together on this one. cpryor's initial frustration led to a really comprehensive set of solutions, from simple toggles to specific CSS adjustments and crucial troubleshooting tips. Remember, whether you're just starting your journey with an online store on a platform like Shopify or you're a seasoned merchant, a little attention to detail in your theme's layout can go a long way in creating a polished and user-friendly experience.