How do I make my main product images scrollable in collections?

Store Design

Topic summary

In a Shopify collection page, product image scrolling behavior is inconsistent. The first product (foldable weight bench) shows navigation arrows but only cycles through the first 5 images, not the full gallery.

The other two products (stool and t‑shirt) do not scroll at all; clicking their images navigates directly to the product page. The request is to enable an image carousel (scrollable gallery) on these items similar to the bench, and to extend the bench’s carousel to include all images.

Context: A public URL is provided, and a screenshot is attached to illustrate the collection grid and controls. No theme name, settings, or code were shared.

Status: No solutions or fixes yet. The thread is open, seeking guidance on theme settings or custom code/JS to support full carousel functionality across all products.

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

I have three products and the first (foldable weight bench) has arrows but only clicks through the first 5 of its total images. The other two images (stool and t-shirt) don’t scroll at all, they just jump to their respective page when clicked. Any way I can make the other two scroll like the first product on the left? And is there way for the bench to scroll through all its images?

Here’s the url

Thanks

Screenshot 2025-12-24 at 1.12.03 PM
Screenshot 2025-12-24 at 1.12.03 PM1920×1026 135 KB

1 Like
2

Did you check this against a freshly downloaded unedited theme? That’s a good place to start.

3

This is a setup issue. Only the bench is using an image carousel, and it’s limited to 5 images. The stool and t-shirt images are standard links, so they jump to the product page instead of scrolling.

Fix:

  • Enable the same image carousel/slider for all product cards.

  • Increase or remove the image limit on the bench’s carousel.

Once they share the same carousel settings, all products will scroll consistently.

4

@Will408 I think other 2 images are products and will enable scroll with arrow when you add images to media images of those products.

First image as arrows as you have added images to it.

5

Please open card-gallery.liquid file, find this line of code.

if product.media.size > 2 and generic_media_size > 0

Change it to this and save the file.

if product.media.size > 1 and generic_media_size > 0

Screenshot 2025-12-25 at 10.53.57
Screenshot 2025-12-25 at 10.53.571888×912 142 KB

Best regards,
Dan from Ryviu: Product Reviews App

6

Hi @Will408

You have already uploaded all the images on the product page. If it’s still not working, please send me the Collaborate code and I’ll check it and update you.

Best regards,
Devcoder :laptop:

7

Hey,

I see the code deeply, and found that your current product card has built in this way, that it shows the arrows on the first product cards only. For the other product cards it will not show even though it has more than 1 image.

So, in order to add it requires to add a custom code into your theme file.

8

Hi,

Hope this will help

Here are the things need to check:

  • Confirm theme supports multi image scrolling on collection cards
  • Make sure all products actually have multiple images uploaded
  • Your bench stopping at 5 images is theme based - not a bug
    Look for a line that limits the loop something like:
{% for media in product.media limit: 5 %}

Removing the limit 5 or raising it to 10–12

  • If other two products don’t scroll, they may be missing the theme’s “carousel trigger”