How to Rotate Header Images on Page Refresh in Dawn Theme?

[Niklas10B]

I want to modify the header image functionality in the Dawn theme so that I can select multiple images in the Theme Editor, and have a different one displayed each time the page is refreshed.

Currently, I can choose a single header image through the Theme Editor, but I would like to extend this functionality to allow selecting multiple images, just like I do for the current header image. Then, on each page load, one of these images should be randomly displayed.

I would appreciate guidance on the best approach to implement this using Liquid and JavaScript while keeping the image selection manageable within the Theme Editor.

• Add a function that randomly switches the banner image on each page load.
• Allow selection of up to 5 images in the Theme Editor using the image picker.
  
  Thank you!

[Iamisabella]

You need to make the changes in the store theme liquid before you can modify it in the theme editor

[Niklas10B]

Hi Iamisabella, 

Yes, I know that, but how is that achievable? Can you help with that? 

[Shadab_dev]

This sounds fun, i will give you that. Haven't done a project of this sort yet but yes it is certainly achievable with theme code modifications using html, css and certainly liquid.

Please reach out via personal links below for a convenient conversation and collaboration.

[Niklas10B]

Thank you! 😉 I will reach out.