What's your biggest current challenge? Have your say in Community Polls along the right column.

Different slideshow images for mobile and desktop

Different slideshow images for mobile and desktop

Annabelm18
New Member
9 0 0

i want to have a slideshow with images for mobile and a different set of image for desktop. Please help. I’m using the dawn theme

Replies 6 (6)

Weaverse
Shopify Partner
82 26 37

Hi,

If you want to create two different versions of a slideshow for mobile and desktop devices using native JavaScript, you can follow these steps:

  • Add two separate sections to your theme, one for the mobile version and one for the desktop version. 
  • Add the slideshow images to each section, using the appropriate markup for each version.
  • Add a script to your theme that detects the device type and hides the appropriate slideshow section. Here's an example code snippet:
// Get the width of the window
var windowWidth = window.innerWidth;

// Get the mobile and desktop slideshow sections
var mobileSlideshow = document.querySelector('.mobile-slideshow');
var desktopSlideshow = document.querySelector('.desktop-slideshow');

// Hide the appropriate slideshow section based on device type
if (windowWidth <= 767) {
  desktopSlideshow.style.display = 'none';
} else {
  mobileSlideshow.style.display = 'none';
}

 

This code uses the window.innerWidth property to get the width of the window, and then selects the appropriate slideshow sections based on their class names. It then hides the appropriate section using the style.display property.

While using native JavaScript can be a powerful way to create custom functionality, it can also be time-consuming and challenging if you don't have much coding experience. If you're looking for a more user-friendly solution, I would recommend using a Shopify app like Weaverse Section Builder, as it provides an easy-to-use interface for creating custom sections and allows you to create different versions of your slideshow for each device type.

I hope this helps!

Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Theme Customizer for Shopify Hydrogen
Join our Weaverse + Hydrogen community: Weaverse Community
Annabelm18
New Member
9 0 0

Thanks this sounds very complicated. Is there no code that I can paste into the edit code section? 

kgbfashionista
Navigator
345 24 48

You can try adding css code when you Customize your theme.

 

Go to Online Store -> Themes -> Customize.

Create two slideshow sections, one for mobile and one for desktop.

 

Now, add this code to the desktop one:

 

@media only screen and (max-width: 768px) {
.slideshow-wrapper{
display: none;
}

 

And this code to the mobile slideshow:

 

@media only screen and (min-width: 769px) {
.slideshow-wrapper{
display: none;
}

 

The slideshow-wrapper class might be called somehow different in your theme, this name is based on my theme. If nothing changes, send me a link to your website and I will tell you how it is called for you.

Feel free to like my post if it was helpful at all
kgbfashionista
Navigator
345 24 48

Sorry, just noticed Shopify won`t allow to add @media rules to the Customization. You can paste both of the code bits to the Online Store -> Themes -> Edit Code -> theme.css (or theme.scss) file

Feel free to like my post if it was helpful at all
kgbfashionista
Navigator
345 24 48

Forgot to mention another thing... I will summarise it all into one message.

 

Go to Online Store -> Themes -> Edit Code -> find the theme.css file

Leave it open for now. Go to your website, right click on the slideshow and click on Inspect. Now, in all that bit of code you will need to find div id for your first slideshow section. Look for <div class="slideshow-wrapper">. When found, the div we need will be right after that, called like <div id="Slideshow-318c42f2-b5f1-4d6c-959b-65c3c71b0b7a" class="..." ... >

 

Now, we need this id Slideshow-318c42f2-b5f1-4d6c-959b-65c3c71b0b7a

 

Go back to your theme.css file and paste this code for desktop (change the slideshow id to yours):

 

 

@media only screen and (max-width: 768px) {
#Slideshow-318c42f2-b5f1-4d6c-959b-65c3c71b0b7a{
display: none;
}

 

 

Find the id of the other slideshow and paste this code for desktop (change slideshow id to yours):

 

@media only screen and (min-width: 769px) {
#Slideshow-318c42f2-b5f1-4d6c-959b-65c3c71b0b7a{
display: none;
}

 

 

Save.

 

Let me know if this helps.

Feel free to like my post if it was helpful at all

gr_trading
Shopify Partner
1973 146 205

Hi @Annabelm18 ,

 

Please refer to the below video to implement the same.

 

 

Hope this will help...

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee