Horizon Theme - Product Gallery with Thumbnails on Mobile

Store Design
, ,

Topic summary

Issue: On the Horizon theme product page, mobile only shows a swipeable image carousel (slider) without thumbnail previews. The requester wants small thumbnail images displayed below the main image on mobile, similar to desktop behavior.

Current behavior:

  • Desktop: Large main image with additional images as thumbnails on the right.
  • Mobile: Only a carousel; no thumbnails visible.

Desired outcome: Thumbnails appear beneath the main product image on mobile, enabling quick selection of images without swiping.

Attempts: CSS modifications were tried but did not achieve the desired layout.

References:

  • Example product page link provided for context.
  • Attached screenshot illustrates the target mobile layout (image is central to understanding the request).

Status: No solution provided yet; the request is open for guidance or a method (CSS/JS/theme settings) to enable mobile thumbnails in Horizon.

Summarized with AI on December 18. AI used: gpt-5.
1

Hi everyone.

I’m new here, this is my first question. I am using the Horizon theme. My issue is that I would like to display product thumbnails on the product page on mobile. Currently on desktop it works well, the main image is the big one, and the rest appears as thumbnails on the right side. But on mobile it only displays a carousel, and I can’t seem to have the thumbnails below.

Here is the product page: Foundations Guided Journal Softcover | Grounded Entrepreneurs

What I want to achieve on mobile is this:

Screenshot 2025-12-18 at 08.54.58
Screenshot 2025-12-18 at 08.54.58708×872 57.4 KB

I played around with CSS but don’t manage to find the solution. Any thoughts?

Thanks and cheers from Switzerland!

2

Please change the settings of your Product media > Thumbnails > Position > Bottom.

Screenshot 2025-12-18 at 15.09.44
Screenshot 2025-12-18 at 15.09.441920×882 167 KB

Then add this code to Custom CSS of Product information.

@media (max-width: 749px) {
    slideshow-controls[pagination-position=center][thumbnails] {
        display: flex !important;
    }
    slideshow-controls[controls-on-media] {
        display: none !important;
    }
}

Screenshot 2025-12-18 at 15.10.27
Screenshot 2025-12-18 at 15.10.271920×831 151 KB

Best regards,
Dan from Ryviu: Product Reviews App

1 Like
3

Hey @virginiebauman

The Horizon theme by default already has an option to display thumbnails in the mobile. Please refer to the screenshot below.

image
image1919×874 165 KB

Best,
Moeed

1 Like
4

@virginiebauman please add this css to the very end of your base.css file and check

shopify admin->online store->themes->edit theme code->assets->base.css

slideshow-controls{display: flex !important;}

image
image1366×768 104 KB

5

Thank you, it works perfectly ! Just asking: it’s not possible to have the thumbnails below on mobile but on the right side on desktop?

6

Thanks. I don’t have this option displayed, only dots / counter / hint