Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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
10253 2037 2107

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 solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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
10253 2037 2107

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 solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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
10253 2037 2107

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 solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.