Mastering Product Image Sizing in Shopify's Horizon Theme: A Comprehensive Guide

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.

Understanding the Horizon Theme's Default Product Layout

The Horizon theme, like many modern Shopify themes, is designed with a specific aesthetic in mind. For product pages, especially on larger desktop screens (wider than 1200px), it defaults to a layout where the product image takes up significantly more space than the product information. As community guru Ploqo explained, this is controlled by a CSS rule:

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

This `2fr 1fr` setting means the image column is exactly twice the width of the text column. While this can look striking for high-quality product photography, it can sometimes push vital product details further down the page, impacting conversion rates and user experience.

The No-Code Solution: Leveraging Theme Editor Settings

Before diving into custom code, always check your theme's built-in customization options. Shopify's theme editor is powerful, and the Horizon theme offers a straightforward way to adjust your product page layout without writing a single line of code.

• Access the Theme Editor: From your Shopify admin, navigate to Online Store > Themes. Find your Horizon theme, click Customize.
• Select Product Page: In the theme editor, use the dropdown at the top to select Products > Default product (or the specific product template you're using).
• Find Product Information Section: On the left sidebar, click on the Product information section.
• Toggle 'Equal columns': Within the settings for 'Product information', you'll find an option called Equal columns. Turn this setting ON. This simple toggle will change your layout from the default 2-to-1 ratio to a balanced 50/50 split, making both the image and the text columns equal in width.
• Avoid 'Limit product details width': Make sure the 'Limit product details width' option is left OFF. Turning this on would narrow the text column, which is the opposite of what you want when trying to give more prominence to product details.

Why this is great: Using theme settings is the safest and most future-proof method. These changes survive theme updates, reducing maintenance headaches.

Advanced Customization: Using Custom CSS for Finer Control

What if a 50/50 split isn't enough? Perhaps you want the image to be even smaller, say 40% or 30% of the page width, to truly highlight your product descriptions. This is where custom CSS comes into play.

Implementing Custom CSS Safely

For custom CSS that affects the entire theme, it's best to place it in Theme settings > Custom CSS, not in the individual section's Custom CSS box. This ensures it's applied broadly and is easier to manage.

Here's the CSS snippet that proved effective in the community thread, with a slight adjustment for clarity and common use (e.g., 40% image width):

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

• Understanding the Code:
  • @media screen and (min-width: 990px): This is a media query. It ensures these styles only apply on screens 990 pixels wide or larger, typically desktop views. This prevents your layout from breaking on mobile devices, where product images usually stack vertically.
  • .product-information__grid.product-information--media-left: This is the CSS selector targeting the specific grid container for your product information when the media (image) is positioned on the left.
  • grid-template-columns: 40% 1fr !important;: This is the core of the change.
    • 40%: This sets the width of the first column (your product image) to 40% of the available space. You can adjust this percentage to make the image larger or smaller.
    • 1fr: This tells the second column (your product details) to take up the remaining available space.
    • !important: This declaration is crucial. It overrides the Horizon theme's default CSS rule, ensuring your custom style is applied.
• Important Considerations:
  • Turn off 'Equal columns': Before using this custom CSS, ensure you've turned OFF the 'Equal columns' setting in the theme editor. If both are active, they will conflict.
  • Media Position: If your product media is positioned on the right, change `--media-left` to `--media-right` in the CSS selector.
  • Typing Double Hyphens: As noted in the thread, be careful when pasting. Mac text substitution can turn `product-information--media-left` into `product-information—media-left` (one long dash), which will break the CSS. Type the double hyphens by hand if you encounter issues.
  • Do Not Delete @media Partially: The `@media` line is a wrapper. Deleting it without also removing its corresponding closing brace (`}`) will result in invalid CSS errors.

Beyond Width: Optimizing Product Image Height and Display

Sometimes, the issue isn't just the width of the product image, but its overall height, especially with tall product photos. Horizon offers excellent controls for this within the Product media block, located under the Product information section in the theme editor.

• Aspect Ratio: If your images are appearing too tall, check the Aspect ratio setting. If it's on 'Auto', tall photos will retain their height. Consider setting it to 'Square' or 'Portrait' to standardize the look and prevent excessively long pages.
• Constrain to Screen Height: Enable the Constrain to screen height option. This is a fantastic feature that prevents any single product image from being taller than the user's screen, significantly improving the viewing experience for products with many or very tall images.
• Switch Type to Carousel: If you have multiple product images, the default 'Grid' layout can stack them vertically, making the page very long. Switching the Type from 'Grid' to Carousel will display all your photos within a single frame, allowing users to swipe or click through them without endless scrolling.

These three settings often have a more dramatic impact on page length and overall user experience than just adjusting the image width, and they require no code at all!

Why Optimizing Product Image Sizing Matters for Your Shopify Store

Controlling your product image size and layout isn't just about aesthetics; it's about optimizing your entire e-commerce experience:

• Enhanced User Experience (UX): A well-balanced product page ensures customers can easily view images and read product details without excessive scrolling or feeling overwhelmed.
• Improved Readability: Giving more space to product descriptions, specifications, and reviews can significantly improve readability and help customers make informed purchasing decisions.
• Better Conversion Rates: When information is easily accessible and the page feels balanced, customers are more likely to engage with your content and proceed to checkout.
• Professional Brand Image: A thoughtfully designed product page reflects positively on your brand, conveying professionalism and attention to detail.

Whether you're just starting your online journey or looking to refine an existing store, mastering these customization techniques for your Shopify theme can make a substantial difference. If you're looking to start your own online store or migrate to a powerful platform, consider Shopify for its robust customization options and extensive app ecosystem.

Experiment with these settings and CSS snippets on your Horizon theme. Always test your changes thoroughly on different devices to ensure a consistent and optimal experience for all your customers. Happy customizing!