Hello! I’m currently using the refresh theme, and I’d like to have separate photos for the 5 hero slideshows for mobile and desktop. Is there any code to insert so i can upload mobile versions? I’ve read several community articles on this topic, but it doesn’t apply for the theme I currently have. Could you please assist me? Thank you so much for taking the time to read this! preview link > https://u8rtfba2msir5lrl-47577071774.shopifypreview.com
You can create 2 hero image sections, one for desktop and one for mobile, and then in CUSTOM CSS of desktop section please add this CSS code
@media screen and (max-width 749px){
slideshow-component { display: none; }
}
And in CUSTOM CSS of mobile section, please add this code
@media screen and (min-width 750px){
slideshow-component { display: none; }
}
Thank you @Dan-From-Ryviu for the swift response! May i know where and how can I add the 2 hero image sections?
You can add sections in your Online store > Themes > Customize
@Dan-From-Ryviu does that mean i should duplicate this set of slideshows? cos i tried putting the mobile code in the custom css and it did not change.. kindly see screenshot
Also, question - can i upload a different slideshow image with the solution you posted?
Yes, please create 2 sections, one for desktop, and one for mobile.