Squished Thumbnails in Horizon Theme? A Shopify Community Fix for Product Page Images

Hey everyone! As a Shopify migration expert and someone who spends a lot of time sifting through the community forums, I often come across those little head-scratchers that can really impact a store's professional look. Today, I want to chat about a common visual glitch that popped up recently for store owners using the Horizon theme: those pesky product page thumbnails not playing nicely.

We saw a thread from a store owner, 'enssle', titled "Horizon Theme Thumbnail problems," and it quickly became a fantastic example of the community coming together to solve a specific, yet widely applicable, visual glitch. It's the kind of subtle issue that can drive you absolutely batty if you don't know where to look!

The Frustrating Thumbnail Problem

enssle was struggling with their product page thumbnails. They were using the 'Carousel' option for their product media and wanted to display those helpful little thumbnails right next to the main product image. Sounds straightforward, right? Well, the images inside those thumbnails just wouldn't cover the space properly. They looked squished, had strange proportions, and were frankly, a bit of an eyesore. It's the kind of thing that makes your beautiful product photos look unprofessional, and that's the last thing any of us want!

They'd already tried all the usual suspects: meticulously checking image properties, resizing, ensuring consistent aspect ratios, and even fiddling with some custom CSS on their own. But nothing seemed to work. It's a frustrating spot to be in when you've done all the logical troubleshooting.

Here's a look at what enssle was seeing:

The Community Steps In: Diagnosing the Root Cause

This is where the power of the Shopify community, and a sharp eye from another contributor, 'tim_tairli', really shone. After enssle shared a preview link to their store (always the first step for good debugging, folks!), tim_tairli quickly pinpointed the culprit.

It turns out the issue wasn't with enssle's images or a broken theme setting, but rather a classic case of overly broad CSS styling. In the Horizon theme (and sometimes in others, especially if custom code has been added by a developer), there might be a global CSS block designed to style all buttons across your store.

tim_tairli identified a specific chunk of CSS, likely in the Theme Settings -> Custom CSS section or perhaps within the layouts/theme.liquid file, that looked something like this (or very similar):

/* GLOBAL BUTTON STYLING — HORIZON THEME */ 
/* Shared button base */
.button,
button.button,
a.button,
.shopify-payment-button__button,
.product-form__submit {
  font-family: var(--font-body-family);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  min-height: 40px;
  padding: 0 28px;             /* <-- offending line */
  border-radius: 0px;
  text-transform: none;
} 
/* Primary buttons */
.button--primary,
button.button--primary,
a.button--primary,
.product-form__submit {
  min-height: 52px;
  padding: 0 32px;
  font-size: 15px;
} /* Secondary buttons */
.button--secondary,
button.button--secondary,
a.button--secondary {
  min-height: 48px;
  padding: 0 28px;
  font-size: 14px;
} 
/* Mobile button sizing */
@media screen and (max-width: 749px) {
  .button,
  button.button,
  a.button,
  .shopify-payment-button__button,
  .product-form__submit {
    min-height: 46px;
    padding: 0 24px;
    font-size: 14px;
  }
  .button--primary,
  button.button--primary,
a.button--primary,
.product-form__submit {
    min-height: 50px;
    padding: 0 26px;
  }
  .button--secondary,
button.button--secondary,
a.button--secondary {
    min-height: 44px;
    padding: 0 22px;
  }
}

The key offender? That padding: 0 28px; line under the shared button base. Because product page carousel thumbnails are actually rendered as elements, this global styling was applying a horizontal padding to them. This extra padding was effectively squishing the images within and throwing off their proportions. It's a subtle thing, but it has a big visual impact!

The Elegant Fix: Targeted CSS Override

So, how do you override this without messing up all your other buttons? The trick is to be more specific with your CSS. Here's the elegant solution tim_tairli provided, and which enssle confirmed worked perfectly:

Here's how to fix your Horizon Theme thumbnails:

1. Navigate to your Theme Editor: From your Shopify admin, go to Online Store > Themes.
2. Edit your Theme: Find your Horizon theme (or the theme you're working on), click on Actions > Edit code.
3. Open theme.liquid or Custom CSS: While tim_tairli suggested adding this to your Theme settings -> Custom CSS box (which is often the safest and easiest place for small overrides), you might also find a snippets/custom-css.liquid file, or you could add it directly to the bottom of your assets/theme.css or assets/base.css if you're comfortable. For simplicity and maintainability, the Custom CSS box in your theme settings (found under Online Store > Themes > Customize > Theme settings > Custom CSS) is usually your best bet.
4. Add the Override CSS: In the Custom CSS section (or chosen file), add the following code snippet:

.button.slideshow-controls__thumbnail {
  padding: 0;
}

5. Save your changes.

What this little snippet does is target only the buttons that also have the class slideshow-controls__thumbnail. By setting their padding to 0, you're telling the browser, "Hey, for these specific thumbnail buttons, ignore that global padding and just give them no padding at all." This allows the images within to expand and fill their container correctly, restoring their original, beautiful proportions.

It's a fantastic reminder that sometimes, the most frustrating visual glitches come from seemingly innocuous global styles. And it really highlights the power of the Shopify community – a quick post, a shared preview, and a precise CSS snippet can save hours of head-scratching! So, if you're rocking the Horizon theme and your product page thumbnails are looking a little off, don't despair! Give this CSS fix a try. It's a simple change that can make a huge difference in how polished and professional your product pages look. Happy selling!