Display product images as slideshow while stacked on desktop

Is there a way to display product images as slideshow on mobile, but to stay stacked on desktop?

I'm using Clay template (Brine template family)

Can you share link to a product page? We can check easier.

3 hours ago, tuanphan said:

Can you share link to a product page? We can check easier.

https://kidsofapril.com/collection/rainbow-speckle-chunky-sweater-natural

Password: KOA2020

Now in Site Styles "Slideshow" is enabled. I'd like this display to be on mobile and tablets, but on desktop - a stacked image view. 🙂

On 8/15/2020 at 10:56 PM, Adeleta said:

https://kidsofapril.com/collection/rainbow-speckle-chunky-sweater-natural

 

Password: KOA2020

Now in Site Styles "Slideshow" is enabled. I'd like this display to be on mobile and tablets, but on desktop - a stacked image view. 🙂

Add to Home > Design > Custom CSS

@media screen and (min-width:901px) {
.ProductItem-gallery-slides-item.sqs-pdp-gallery-slide {
    position: relative;
    opacity: 1;
}
}

Thanks Tuan.

Unfortunately, the code only made the main image of the slideshow to disappear.

For other members, add to Home > Design > Custom CSS

/* Stacked image on desktop */
@media screen and (min-width:901px) {
.ProductItem-gallery-thumbnails-item {
    height: auto !important;
    display: block;
    margin-right: 0 !important;
    width: 100%;
}
.ProductItem-gallery-thumbnails-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
}

On 8/17/2020 at 10:36 AM, tuanphan said:

For other members, add to Home > Design > Custom CSS

/* Stacked image on desktop */
@media screen and (min-width:901px) {
.ProductItem-gallery-thumbnails-item {
    height: auto !important;
    display: block;
    margin-right: 0 !important;
    width: 100%;
}
.ProductItem-gallery-thumbnails-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
}

 

Hoping you can help me with this as well. I want to do the same thing, but I've already added some code to make the product info sticky on desktop while I scroll. I think it's interfering with your code & pushing my photos down. 

https://disc-greyhound-adws.squarespace.com/shop-all/single-anthurium-print

Here's the code I currently to make the info sticky:

.ProductItem-gallery-slides {
@media screen and (min-width: 769px)
{
    width: 45vw;
    overflow: visible !important;
}
}
.ProductItem-details {
      position: -webkit-sticky;
      position: sticky;
    top: 0;
        padding-top: 10vw;

}

8 hours ago, amymmcneil said:

Hoping you can help me with this as well. I want to do the same thing, but I've already added some code to make the product info sticky on desktop while I scroll. I think it's interfering with your code & pushing my photos down. 

https://disc-greyhound-adws.squarespace.com/shop-all/single-anthurium-print

Here's the code I currently to make the info sticky:

.ProductItem-gallery-slides {
@media screen and (min-width: 769px)
{
    width: 45vw;
    overflow: visible !important;
}
}
.ProductItem-details {
      position: -webkit-sticky;
      position: sticky;
    top: 0;
        padding-top: 10vw;

}

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
.ProductItem-gallery-slides:before {
    padding-bottom: 20% !important;
}
}

4 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
.ProductItem-gallery-slides:before {
    padding-bottom: 20% !important;
}
}

 

Thank you!!!!!!!!!!!

It seems header overlap product title on mobile. Do you want to fix?

40 minutes ago, tuanphan said:

It seems header overlap product title on mobile. Do you want to fix?

Wow yes please I was just going to ask! Mobile header a bit too close to the top too. 

Also tablet is showing the slideshow but I think it'd like that stacked too.

On 11/17/2020 at 8:52 PM, amymmcneil said:

Wow yes please I was just going to ask! Mobile header a bit too close to the top too. 

Also tablet is showing the slideshow but I think it'd like that stacked too.

Hi. Sorry for the delay. It look likes you solved?

On 11/21/2020 at 10:20 AM, tuanphan said:

Hi. Sorry for the delay. It look likes you solved?

Hey Tuanphan, sorry to dig up a old thread but I have been looking for the same thing and found this. Just launched the website www.mbfpetshop.com and the first thing people told me was they didnt realize the there were more photos of each product (especially on desktop because my product photos are large)---so I am trying to find a way to have the product images on both mobile/desktop rotate to show that there is more than just the thumbnail image under each product.

I use the Hyde template

Would this code you posted if I insert it make the product images rotate or at least have arrows to show that there is more than just the 1st picture?

@media screen and (min-width:768px) {
.ProductItem-gallery-slides:before {
    padding-bottom: 20% !important;
}
}

On 2/27/2021 at 9:58 PM, mbfpetshop said:

Hey Tuanphan, sorry to dig up a old thread but I have been looking for the same thing and found this. Just launched the website www.mbfpetshop.com and the first thing people told me was they didnt realize the there were more photos of each product (especially on desktop because my product photos are large)---so I am trying to find a way to have the product images on both mobile/desktop rotate to show that there is more than just the thumbnail image under each product.

I use the Hyde template

Would this code you posted if I insert it make the product images rotate or at least have arrows to show that there is more than just the 1st picture?

@media screen and (min-width:768px) {
.ProductItem-gallery-slides:before {
    padding-bottom: 20% !important;
}
}

Can you share link to product?

On 3/2/2021 at 1:57 AM, tuanphan said:

Can you share link to product?

No problem here is a link https://www.mbfpetshop.com/online-shop/tie-dye-pet-bandana

I saw with the Hyde template you can either stack images or make a slideshow but I was really looking for something more like a carousel option. I know the social media widget have a carousel option where you can set the images to rotate after 3 seconds, 5 seconds or whatever you want. Was just looking for that same option, but just on product photos as well.

On 3/3/2021 at 8:25 AM, mbfpetshop said:

No problem here is a link https://www.mbfpetshop.com/online-shop/tie-dye-pet-bandana

I saw with the Hyde template you can either stack images or make a slideshow but I was really looking for something more like a carousel option. I know the social media widget have a carousel option where you can set the images to rotate after 3 seconds, 5 seconds or whatever you want. Was just looking for that same option, but just on product photos as well.

@mbfpetshop just checked out your shop! looks awesome!

Were you able to do the slideshow for products like you were asking? I like how it looks now and would love to implement similar features (multiple product images, change photo on hover, quick view, etc.). Was all of that available with the Hyde template you mentioned?

i did all of this but it keeps repeating the first image on desktop