Different Slideshow Images For Mobile And Desktop

Solved

Different Slideshow Images For Mobile And Desktop

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
12040 2353 2530

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
12040 2353 2530

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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
12040 2353 2530

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.