Add Product Image Slider on Collection Page

Store Design
, , , ,
1

Hello Shopify Community,

I’m working on the Dawn theme and trying to add a product image slider inside the collection page product cards.

Goal:

  • Allow customers to slide through multiple product images directly from the collection grid

  • Show left/right arrows

  • Show dot indicators centered at the bottom of the image

  • Keep product card clickable

  • No external app (custom code only)

Store URL:

Reference store (example of desired behavior):

Any guidance would be greatly appreciated. I’ve been stuck on this for two days.

Thank you in advance.

3

Hi @fahad110

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottow of the file:

@media (min-width: 768px){

  .product-card__image-wrapper {
    overflow: hidden;
    position: relative;
  }

  .product-card__image-list {
    display: flex;
    transition: transform 0.4s ease;
    width: 100%;
  }

  .product-card__image-item {
    min-width: 100%;
    flex-shrink: 0;
  }

  .product-card__image-item img {
    width: 100%;
    display: block;
  }

}

Best regards,
Devcoder :laptop:

4

Thank you for your response, but it’s not working

5

Thank you so much for your helpful suggestion!

I really appreciate you taking the time to explain this. However, I’m not very familiar with coding and I’m a bit lost on how to actually implement what you described.

Would it be possible for you to provide more detailed step-by-step guidance? Specifically:

  1. Which exact files do I need to edit? (like main-collection-product.liquid, card-product.liquid, etc.)

  2. What exact code should I add to each file? (copy-paste ready would be incredibly helpful)

  3. Where exactly in those files should I place the code?

  4. Any CSS I need to add to make the arrows and dots look right?

This would be really helpful for someone like me who’s still learning. I really want to get this slider working on my collection page.

Thank you again for your help! :folded_hands:

7

Just did something similar in for this store

Best

8

Hi @fahad110

I have already implemented this on the same store. Is this how you would like it?

Best regards,
Devcoder :laptop:

9

Hi @fahad110,

For this feature, CSS alone usually will not be enough.

To show multiple product images inside each collection card with arrows and dots, you normally need 3 parts:

  1. Liquid change — to output multiple product images inside the product card
  2. JavaScript — to control next/previous slide behavior
  3. CSS — to style arrows, dots, spacing, and mobile layout

That is why only adding CSS to base.css may not work.

Also, be careful with performance. If every product card loads all product images on the collection page, it can slow down the page, especially on mobile.

Best approach:

  • Duplicate the theme first
  • Test with only one product card
  • Add lazy loading for images
  • Make sure the whole product card remains clickable
  • Keep arrows/dots inside the image area only

If you want a no-code option, you can also use a product showcase or collection slider app like EasyDisplay/EasyBoost to create product sliders without editing theme files.

Hope this helps.