If you’re using one of Shopify’s free themes, you might have noticed that the same slideshow is used for both desktop and mobile. This makes your website not mobile-ready since desktop images are wide, while mobile screens need a more vertical layout for better visibility.
To design a Shopify store that is fully responsive, we need different slideshow images for different devices. Luckily, with a simple Liquid and CSS tweak, you can display separate slideshow images for mobile and desktop, ensuring a better user experience.
The following method is the most straightforward and doesn’t require editing the theme code.
1. Create Your Slideshow
Add the slideshow section to your store as you would normally do. Edit the title, text, buttons, images, and other attributes until satisfied.
2. Duplicate The Slideshow You Just Created
Easily click on the section’s three-dot menu and select Duplicate.
Now, you can replace the images of each slide with their alternative version destined for mobile devices.
3. Add Custom CSS Code To Both Slideshows
Once both slideshows are ready, add the following code in the Custom CSS setting. This will ensure they only appear on their assigned devices (desktop or mobile). Note that the Custom CSS option is only available for the whole slideshow, and you won’t find it if you’re looking at the settings of one of its slides.
Add this code to the desktop slideshow:
@media screen and (max-width: 749px) {
.banner,
slideshow-component {
display: none;
}
}Add this code to the mobile slideshow:
@media screen and (min-width: 750px) {
.banner,
slideshow-component {
display: none;
}
}5. Test Your Changes
Once you’ve saved your changes, check both views of your website. You can do so directly through the mobile and desktop view buttons on the Theme Editor’s top right menu bar.
If you test your website directly on your browser, you might need to reload the page if it was open before editing your Shopify theme.
Now, your Shopify store will display optimized slideshow images for both desktop and mobile visitors, improving their shopping experience!
Pro Tip: Always test your changes on multiple devices before publishing live. If you’re unsure, duplicate your theme before editing its code or design.
Need more help? Feel free to reach out!