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 post
  • Replies 19
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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-ga

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

Posted Images

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 post
  • 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 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, work for a non-profit project (build 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. 

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
Link to post
  • 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 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, work for a non-profit project (build 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. 

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, work for a non-profit project (build 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. 

Link to post
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 post
  • 1 month later...
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?

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

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

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

-- I'm Tuan, work for a non-profit project (build 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. 

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

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

-- I'm Tuan, work for a non-profit project (build 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. 

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...