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

I can only see one product photo on mobile version?

Recommended Posts

Posted (edited)

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

Share this post


Link to post

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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


Link to post

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

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
Posted (edited)

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

Share this post


Link to post

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

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
9 hours ago, justjeremy said:

This site is Shopify, not Squarespace?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
Posted (edited)
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

Share this post


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

Share this post


Link to post

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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...