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

Store Design
, ,
1

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.

2

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 + ‘)’;

});

  1. Replace ‘image1.jpg’, ‘image2.jpg’, ‘image3.jpg’ with your actual image paths.

  2. 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

3

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

4

Hi @DaisyVo could you give another suggestion please?