Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

I can only see one product photo on mobile version?


Recommended Posts

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

Edited by brunnatorino
Link to comment
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!!

Link to comment
  • 1 month later...

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

Squarespace 4.JPG

Squarespace 3.JPG

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

mobile.thumb.JPG.2b2559501d150c101841e86545f4ea02.JPG

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 stacked1035918273_Squarespace4.JPG.624502bd674aa948180c21d044a5d116.JPG709083607_Squarespace3.thumb.JPG.fc58a4d847b133cd72ada3d47be40ac9.JPG

 

Edited by PJ22
Link to comment
  • 1 month later...

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?

IMG_4319.PNG

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Edited by WoodboxWorkshop
Link to comment
  • 1 month later...

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!

Untitled.jpg

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
  }

1.JPG

2.JPG

Edited by brunodiazcast
Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 10 months later...
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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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%;
}
}
Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...