Horizon Theme Thumbnail problems

Store Design
, ,
1

Hey there, within the Horizon Theme I have problems with the thumbnails on my product page: the images just won’t cover the thumbnails and have strange proportions (see the screen shot). I selected Carousel and want to display thumbnails next to it.

So far I tried to fix it by: checking all the properties, prepare the original images and reduce the size or save them all with the same proportions, tried to fix it with css.
Did anybody experience the same problem within Horizon or knows a solution?

Screen Shot 2026-06-06 at 07.34.02
Screen Shot 2026-06-06 at 07.34.021710×1338 308 KB

2

Must be something specific to your setup.

Share a link to your store and a preview password, if one is set.
If this as a draft theme, share a preview link (search forum on how to do it).

3

Here is a preview link: https://8jg1rl2w8e7depaz-97248084350.shopifypreview.com
Thanks so much!

4

Ok here is the code, either in your Theme Settings-> Custom CSS, or in your layouts/theme.liquid, added by some dev?:

/* 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;
  }
}

Because these selectors are pretty loose, they apply to product page carousel thumbnails which are <button>s too.

So you can add code like this into Theme settings->Custom CSS:

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

This should override padding value for thumbnails and fix this problem.

5

Thank you so much, it worked! Thanks a lot!!