Issue with product page for some products - horizon theme

Store Design
, ,

Topic summary

A user reports inconsistent product page layouts in the Horizon theme, where some products display correctly while others show an unwanted white gap above the product image, causing the entire image to shift downward.

Root Cause:
The issue stems from image container alignment in the Horizon theme. When product images have inconsistent aspect ratios, the theme’s central alignment creates extra white space above certain images.

Proposed Solutions:

  1. Theme Settings Adjustment (No Code):

    • Navigate to Online Store → Themes → Customize → Product Page settings
    • Locate “Image aspect ratio” under Media/Product image options
    • Change setting to “Adapt to image” or “Square” for consistent alignment

  2. CSS Override:

    • Add custom CSS to base.css or theme.css
    • Force images to align at the top of their containers using align-items: flex-start and object-position: top center
    • This prevents vertical centering that creates the gap

Both solutions aim to standardize how product images display across all product pages, eliminating the inconsistent spacing issue.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hello, i have an issue with my product page for certain products. On some of them, it’s completely normal with no issues, and then som products have a white gap above the product image:

Screenshot 2025-09-03 at 17.09.04
Screenshot 2025-09-03 at 17.09.04992×948 62 KB

this is an example of a product with no issues, everything is normal.

Screenshot 2025-09-03 at 17.09.10
Screenshot 2025-09-03 at 17.09.10895×964 246 KB

however this product has a white gap above the image, and the whole product image is shifted down.

How do i fix this?

my store is https://6p0xu9pyhv5nv556-90984481091.shopifypreview.com , theme is horizon

3

I saw the white-gap issue you’re having on some product pages that usually happens when image sizes or theme settings aren’t consistent.

I can take a quick look at your theme and product templates, find what’s causing it and fix it so all your pages look clean and uniform. Want me to send you a quick plan on how I’d do that?

4

Hi @ads18922!

Since you’re on the Horizon theme, the white gap above your product image isn’t really from the logo/header — it’s caused by image container alignment in this theme. Horizon tries to make all product images align centrally, but if the image aspect ratio isn’t uniform, it leaves that extra white space.

Here are two ways to fix it:

Option 1: Theme settings (no code)

  1. Go to Online Store → Themes → Customize.

  2. Open the Product Page settings.

  3. Look for Image aspect ratio (it might be under “Media” or “Product image”).

  4. Change it to “Adapt to image” or “Square” so all products align consistently.

Option 2: CSS Fix

If the settings don’t fix it, you can force the image container to remove the gap.

Go to Online Store → Themes → Edit Code → Assets → base.css (or theme.css) and add this:

.template-product .product__media-wrapper {

align-items: flex-start !important;

}

.template-product .product__media img {

object-position: top center !important;

}

This makes all product images stick to the top of the container instead of being vertically centered with empty space above.

Hopefully, this will fix the issue for you.

Thanks,

EmbedAny Support