I can only see one product photo on mobile version?

Site URL: https://araraswim.nl/bikini-sets/gin-amp-tonic-bikini-set

Hello,

On the pc version of my product item page, the products with more than one photo show a slideshow so the visitor can select and view multiple images of the product.

However, in mobile mode only one picture (the thumbnail) shows up and you can't select to see the other ones. I'm afraid this lead to customers thinking there is only one picture. 

I have tried changing the style to stacked/carousel but nothing changed the mobile version.

Ideally I would want it to be possible to select other photos, but shortening the time it takes to change pictures would also work.

Can anybody help me out? 

Thank you very much

On 3/27/2020 at 9:24 AM, tuanphan said:

Add to Home > design > Custom CSS.

This code will show thumbnails on mobile.

@media screen and (max-width:767px) {
.ProductItem-gallery-thumbnails {
    display: flex;
}
.ProductItem-gallery {
    flex-direction: column-reverse;
}
.ProductItem-gallery-slides {
    width: 100%;
}
}

 

It works perfect! thank you so so much!!

Hello Everyone,

I tried the code above but swapped out
(Productitem-gallery-thumbnails) with our site code (ProductItem-gallery-slides-item) which did not work.

I'm also interested in doing a mobile slideshow on the product page but with indication squares or dots over the image or below the image

ByPaigeJordan.com

On 5/12/2020 at 10:31 PM, PJ22 said:

Hello Everyone,

I tried the code above but swapped out
(Productitem-gallery-thumbnails) with our site code (ProductItem-gallery-slides-item) which did not work.

I'm also interested in doing a mobile slideshow on the product page but with indication squares or dots over the image or below the image

ByPaigeJordan.com

 

 

Can you share link to page in screenshot?

3 hours ago, tuanphan said:

Can you share link to page in screenshot?

We would love for mobile view to be in slideshow mode with the indication dots instead of the thumbnails at the bottom if possible and for the desktop view to stay the same stacked

I've tried the code and it works! It's just that when I went to my phone to check, the thumbnails are circle? But when editing in Squarespace it's square -- it's odd. I'd also like to add some space between the picture shown and the small thumbnails -- it looks crammed. Can anyone help?

6 hours ago, justjeremy said:

I've tried the code and it works! It's just that when I went to my phone to check, the thumbnails are circle? But when editing in Squarespace it's square -- it's odd. I'd also like to add some space between the picture shown and the small thumbnails -- it looks crammed. Can anyone help?

Difficult to help without checking url.

Can you share link to product page?

http://imjeremyclyde.com/shop-my-closet/tommy-hilfiger-sailing-jacket

temp pass: 123

9 hours ago, justjeremy said:

http://imjeremyclyde.com/shop-my-closet/tommy-hilfiger-sailing-jacket

temp pass: 123

This site is Shopify, not Squarespace?

On 3/27/2020 at 8:24 AM, tuanphan said:

Add to Home > design > Custom CSS.

This code will show thumbnails on mobile.

@media screen and (max-width:767px) {
.ProductItem-gallery-thumbnails {
    display: flex;
}
.ProductItem-gallery {
    flex-direction: column-reverse;
}
.ProductItem-gallery-slides {
    width: 100%;
}
}

 

This code worked but I ended up with oval thumbnails, currently on squarespace 7.1, any help on this would be greatly appreciated. customers are assuming each product only has 1 image (www.woodboxworkshop.com) thanks in advance!

On 3/27/2020 at 3:24 AM, tuanphan said:

@media screen and (max-width:767px) { .ProductItem-gallery-thumbnails { display: flex; } .ProductItem-gallery { flex-direction: column-reverse; } .ProductItem-gallery-slides { width: 100%; } }

I tried adding that Custom CSS, but it's not working, any idea why?

Hi @tuanphan this code doesn't seem to work for me either.  I am using version 7.1.  Do you know why it wouldn't be working? Here is a screenshot of code that I already have input for another issue- this code worked fine.  I have tried adding the code you posted below this code and I have also deleted the previous code and added the one you provided, but I am still not getting thumbnails on my mobile version.  Can you help? Thank you!

I too am suffering from this problem, have tried codes etc doesn't seem to be working.. perhaps it is the 7.1 version that is hindering it? 

ahhh... someone else has just pointed this out to me.. 
https://www.sqspthemes.com/plugins/product-image-rollover
it's a plug in that you have to pay for to make it work 😞
Unless someone has a better cheaper solution.... 

On 9/14/2020 at 1:19 AM, brunodiazcast said:

I tried adding that Custom CSS, but it's not working, any idea why?

On 9/18/2020 at 2:24 AM, Missyc said:

ahhh... someone else has just pointed this out to me.. 
https://www.sqspthemes.com/plugins/product-image-rollover
it's a plug in that you have to pay for to make it work 😞
Unless someone has a better cheaper solution.... 

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

On 9/17/2020 at 5:34 AM, Barrett said:

Hi @tuanphan this code doesn't seem to work for me either.  I am using version 7.1.  Do you know why it wouldn't be working? Here is a screenshot of code that I already have input for another issue- this code worked fine.  I have tried adding the code you posted below this code and I have also deleted the previous code and added the one you provided, but I am still not getting thumbnails on my mobile version.  Can you help? Thank you!

What is your problems? Can you share link to cart page?

Not sure if this is what everyone wanted, but I got it working with this code:

.ProductItem-gallery .ProductItem-gallery-scroll {
  display: grid;
  place-items: center;
  }

On 9/19/2020 at 9:00 PM, jesschung said:

Not sure if this is what everyone wanted, but I got it working with this code:

.ProductItem-gallery .ProductItem-gallery-scroll {
  display: grid;
  place-items: center;
  }

Thank you! It worked, now the only problem was that there was a space between the gallery and the product's name, but I manage to fix that by adding margin to the code:

.ProductItem-gallery .ProductItem-gallery-scroll {
    display: grid;
    place-items: center;
    margin-bottom: -80px;
  }

Hi @tuanphan,

This is where i am having problems, https://www.missycurry.co.uk/shop/p/portscatho-harbour the thumbnails are down the sides and on a mobile view you can't see them.. 

I have bought the plug in but don't think i have set it up right either! 😞

On 9/21/2020 at 9:29 PM, Missyc said:

Hi @tuanphan,

This is where i am having problems, https://www.missycurry.co.uk/shop/p/portscatho-harbour the thumbnails are down the sides and on a mobile view you can't see them.. 

I have bought the plug in but don't think i have set it up right either! 😞

Hi. What is access password?

On 3/27/2020 at 7:24 PM, tuanphan said:

Add to Home > design > Custom CSS.

This code will show thumbnails on mobile.

@media screen and (max-width:767px) {
.ProductItem-gallery-thumbnails {
    display: flex;
}
.ProductItem-gallery {
    flex-direction: column-reverse;
}
.ProductItem-gallery-slides {
    width: 100%;
}
}

 

Hi @tuanphan, I tried using this code but I'm noticing any changes at all. Do you know why this might be? My site is https://raccoon-radish-ytrb.squarespace.com/ and password is: flutesandflutists

19 hours ago, Flutes_Flutists said:

Hi @tuanphan, I tried using this code but I'm noticing any changes at all. Do you know why this might be? My site is https://raccoon-radish-ytrb.squarespace.com/ and password is: flutesandflutists

Can you share link to a product? I don't see product on your site

On 9/25/2020 at 8:06 AM, tuanphan said:

Hi. What is access password?

Here is a product page: https://raccoon-radish-ytrb.squarespace.com/store/p/eastman-efl214

Passcode is flutesandflutists

This code is currently in my CSS and as you can see, it's not having any effect.

@media screen and (max-width:767px) {
.ProductItem-gallery-thumbnails {
    display: flex;
}
.ProductItem-gallery {
    flex-direction: column-reverse;
}
.ProductItem-gallery-slides {
    width: 100%;
}
}

Try this new code

@media screen and (max-width:767px) {
.ProductItem-gallery-scroll {
    display: block !important;
}
figure.ProductItem-gallery {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
}
figure.ProductItem-gallery>div {
    width: 100% !important;
}
.ProductItem-gallery-thumbnails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
}

On 8/5/2021 at 3:42 PM, tuanphan said:

Try this new code

@media screen and (max-width:767px) {
.ProductItem-gallery-scroll {
    display: block !important;
}
figure.ProductItem-gallery {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
}
figure.ProductItem-gallery>div {
    width: 100% !important;
}
.ProductItem-gallery-thumbnails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
}

 

Sorry I never replied. This worked perfectly. Thanks again!