Can you make an image banner cycle through with every refresh?

[rene94]

I’m using the dawn theme and my website is www.blerriot.com

I was wondering if there was some code I can add or maybe in the customisation tool to allow me to have my landing page image change with every refresh to keep it fresh. 

[DaisyVo]

Hi @rene94 

To make your landing page image change with every refresh in the Dawn theme, you can add a small JavaScript snippet to randomly select and display a different image each time the page reloads.

1. Go to Online Store > Themes > Actions > Edit Code.
2. Open Assets > theme.js or create a new JavaScript file.
3. Add this code snippet:

document.addEventListener('DOMContentLoaded', function() {

    var images = [

        'image1.jpg', // Add your image paths here

        'image2.jpg',

        'image3.jpg'

    ];

    var randomImage = images[Math.floor(Math.random() * images.length)];

    document.querySelector('.landing-page-image').style.backgroundImage = 'url(' + randomImage + ')';

});

4. Replace 'image1.jpg', 'image2.jpg', 'image3.jpg' with your actual image paths.

5. Save and refresh the page. The landing image will change on each reload.

If you have other questions, I am willing to answer them more.

Best regards,

Daisy

[rene94]

Hi,

it didn't work I've added that code and nothing has changed. It only shows the image that I've chosen as my image banner

[rene94]

Hi @DaisyVo could you give another suggestion please?