Image Slideshow for Collections

Technical Q&A
, ,
1

Hello,

I am customising the Savor theme and I am using a Collection List Grid on the the Homepage.

Rather than having a static image for each collection on the grid as shown below, I was wondering if there was a way to create a slideshow for each collection? The images would relate to the products in that particular collection. They could move randomly or at set times. I have tried the ai generate option, but while it does give me the tools to do this, it doesn’t actually function. Perhaps there’s an app or some code that I can use? Or maybe it’s standard in a different theme? Any help much appreciated.

Thanks

collection grid images.PNG
collection grid images.PNG955×650 104 KB

2

Hi there, thanks for sharing this I get what you’re aiming for. By default, Shopify’s Collection List section only supports one static image per collection, so the slideshow feature isn’t built-in. That’s why the AI block you tried isn’t functioning.

If you want each collection card to cycle through multiple product images, you’ve got a couple of routes:

Option A – Custom Code

  • A developer can edit your theme’s collection-list.liquid file.

  • Instead of pulling just the collection’s featured image, you’d loop through the first few product images in that collection and display them in a timed slideshow.

  • This gives you full control (e.g., auto-slide, fade-in, random).

Option B – App Solution

  • There are Shopify apps like Shoppable Slideshow or Dynamic Slideshow Galleries that let you assign rotating product images to collections.

  • These don’t come out-of-the-box in Savor, but they’re plug-and-play without coding.

Option C – Different Theme

  • Some premium themes (like Prestige or Flow) have built-in collection animations and image-switching that look close to what you want.

:backhand_index_pointing_right: The most Shopify-compliant and lightweight approach is usually Option A (a few lines of Liquid + JS). If you’re comfortable editing theme code, I can outline the snippet you’d add. Otherwise, an app will get you running quickly.

Would you like me to share a code snippet example for Option A so you can test it in Savor?

:camera_with_flash: And here’s an image mockup of what your grid could look like with auto-sliding product images (instead of static ones):

Image Oct 1, 2025, 12_28_39 PM
Image Oct 1, 2025, 12_28_39 PM1536×1024 111 KB

1 Like
3

Hello @NSShoreham ,

I hope you are well!

Basically, this can be done using custom code. But, the AI do provide some wrong code. There are 2 ways which you can do now:
1.) Install the app. There are few apps which provide slider like - Slider Revolution & Sections - Slider Revolution: Create Stunning Slider, Banner, Slideshow | Shopify App Store or POWR Image Slider & Carousel - POWR: Image Slider & Carousel for Shopify | Shopify App Store.
2.) Use the custom code.

1 Like
4

Hello @kathrineprotech Option A sounds like what I wanted, especially as it lightweight, but I’m not confident with editing theme code. I have tried before with various degrees of success and failure! I would love to test it, please!

5

Hello @AiTrillion Thanks for the app recommendations. I’ll have a look at them. Thanks!

6

Hi @NSShoreham,

Perfect , glad Option A sounds like a fit! Don’t worry about not being confident with code edits; I’ll walk you through step by step so you can test it safely without breaking anything.

Here’s what I recommend:

  1. Duplicate your theme first

    • In your Shopify admin, go to Online Store > Themes.

    • Click the … next to your live theme and choose Duplicate.

    • This way, you’ll have a safe backup copy in case anything goes wrong.

  2. Apply the code changes in the duplicate theme

    • Navigate to Actions > Edit code on the duplicate.

    • I’ll provide the lightweight snippet you can paste in the right file (no need to touch complex areas).

  3. Preview & test

    • Use the preview button to make sure the behavior works as expected.

    • Once you’re happy, you can publish the duplicate theme to go live.

This way you’ll have zero risk, and it keeps things clean and reversible.

Would you like me to post the exact snippet and which file to place it in here, so you can copy/paste and try it out?

7

@kathrineprotech Yes please, thanks!

8

Hi @NSShoreham,

Great, here’s the lightweight snippet you can try out:

Step 1. In your duplicate theme, go to
Online Store > Themes > Actions > Edit Code.

Step 2. Open:
/Sections/collection-list.liquid

Step 3. Inside the loop that outputs each collection image, replace the static {{ collection.image | image_url }} with this snippet:

{%- assign first_product = collection.products.first -%}
{%- if first_product and first_product.featured_image -%}
  <img 
    src="{{ first_product.featured_image | image_url: width: 800 }}" 
    alt="{{ collection.title }}" 
    loading="lazy" 
  >
{%- else -%}
  <img 
    src="{{ collection.image | image_url: width: 800 }}" 
    alt="{{ collection.title }}" 
    loading="lazy" 
  >
{%- endif -%}

:magnifying_glass_tilted_right: What this does:

  • If the collection has products, it will show the featured image of the first product (so it feels dynamic).

  • If not, it falls back to the standard collection image.

Step 4. Save, then hit Preview to test.

:backhand_index_pointing_right: If you’d like a true slideshow/rotating images, that would need a slightly longer script (using a small JS snippet to rotate through product images). But this gives you a safe, lightweight “dynamic image” starting point.

Would you like me to also share the slideshow version so you can compare both approaches?

9

@kathrineprotech I’d prefer it

to rotate through the product images if possible. Thanks

10

Hi @Lannersocks,

Got it :+1: — instead of just swapping to the second image, you’d like the product card to rotate through all product images on hover. That’s definitely possible with a bit of custom JS/CSS.

Would you like me to share a ready-to-use code snippet you can drop into your Dawn theme, or would you prefer step-by-step guidance so you can adjust it later?

11

Hey @NSShoreham,

By any chance can I have your store url so that I can take a look to the theme structure and provide you the exact solution code.

Waiting to hear back from you.
Thanks

12

@kathrineprotech please share the snipped for Savor theme

13

The store isn’t live yet. I’m builing it using the Savor theme. Thanks

14

Alright, Understood.

But still it’s possible to share the url. Because Shopify offers a URL for the store to test on.
So, consider to share it with me then I can take a look into it.

Thanks

1 Like
15

Hello,

I didn’t know that was possible, thanks! Preview is https://xvfsts44cgv8vkq4-38667321483.shopifypreview.com

16

Thanks for sharing the store url.

Let me take a look first.

1 Like
17

I’d be grateful if you can share this, thanks!

18

Yeah,

I just take a look in your current structure. I found that this is not native feature of Savor theme. This need to do custom code in your theme file.

Are you comfortable to share the collab code in the p/m? Because only this way I can implement the requested changes.

Thanks

1 Like