Different Slideshow Images For Mobile And Desktop

Solved
jjfiguro
Visitor
3 0 0

Hello, I need help having two different images on my slideshow. 1 for desktop and 1 for mobile. I'm using the Berlin theme

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
5595 1027 1056

This is an accepted solution.

Hi @jjfiguro 

Please add this code at the bottom of your base.css file in Online store > Themes > Edit code. This code will hide 1st slideshow section on mobile and 2nd slideshow section in desktop

#shopify-section-template--21473064255764__b71aa9d9-a13f-4722-8851-361751fa2bbc {
    display: none;
}
@media (max-width: 767px) {
#shopify-section-template--21473064255764__b71aa9d9-a13f-4722-8851-361751fa2bbc {
    display: block !important;
}
#shopify-section-template--21473064255764__slideshow { 
    display: none !important; 
}
}

.

 

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

View solution in original post

Replies 3 (3)
Dan-From-Ryviu
Shopify Partner
5595 1027 1056

Hi @jjfiguro 

You can create 2 Slideshow sections, one upload images for desktop and one for mobile. After that, please send me your store link so I can provide the code to hide mobile slideshow on desktop, hide desktop slideshow on mobile. 

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

jjfiguro
Visitor
3 0 0

I added a second slide show:

https://stock-streetwear.com

password: stiets

Dan-From-Ryviu
Shopify Partner
5595 1027 1056

This is an accepted solution.

Hi @jjfiguro 

Please add this code at the bottom of your base.css file in Online store > Themes > Edit code. This code will hide 1st slideshow section on mobile and 2nd slideshow section in desktop

#shopify-section-template--21473064255764__b71aa9d9-a13f-4722-8851-361751fa2bbc {
    display: none;
}
@media (max-width: 767px) {
#shopify-section-template--21473064255764__b71aa9d9-a13f-4722-8851-361751fa2bbc {
    display: block !important;
}
#shopify-section-template--21473064255764__slideshow { 
    display: none !important; 
}
}

.

 

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now