Guest Posted March 27, 2020 Share Posted March 27, 2020 (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 March 27, 2020 by brunnatorino Link to comment
Featured Comment tuanphan Posted March 27, 2020 Featured Comment Share Posted March 27, 2020 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%; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Guest Posted March 28, 2020 Share Posted March 28, 2020 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
PJ22 Posted May 12, 2020 Share Posted May 12, 2020 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 Link to comment
tuanphan Posted May 15, 2020 Share Posted May 15, 2020 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. Or send to forum message 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
PJ22 Posted May 15, 2020 Share Posted May 15, 2020 (edited) 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 Edited May 15, 2020 by PJ22 Link to comment
justjeremy Posted July 11, 2020 Share Posted July 11, 2020 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? Link to comment
tuanphan Posted July 11, 2020 Share Posted July 11, 2020 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. Or send to forum message 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
justjeremy Posted July 15, 2020 Share Posted July 15, 2020 http://imjeremyclyde.com/shop-my-closet/tommy-hilfiger-sailing-jacket temp pass: 123 Link to comment
tuanphan Posted July 15, 2020 Share Posted July 15, 2020 9 hours ago, justjeremy said: http://imjeremyclyde.com/shop-my-closet/tommy-hilfiger-sailing-jacket temp pass: 123 This site is Shopify, not Squarespace? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
WoodboxWorkshop Posted July 19, 2020 Share Posted July 19, 2020 (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 July 21, 2020 by WoodboxWorkshop Link to comment
brunodiazcast Posted September 13, 2020 Share Posted September 13, 2020 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 comment
Barrett Posted September 16, 2020 Share Posted September 16, 2020 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! Link to comment
Missyc Posted September 17, 2020 Share Posted September 17, 2020 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? Link to comment
Missyc Posted September 17, 2020 Share Posted September 17, 2020 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.... Link to comment
tuanphan Posted September 19, 2020 Share Posted September 19, 2020 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. Or send to forum message 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
jesschung Posted September 20, 2020 Share Posted September 20, 2020 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; } Lgray and brunodiazcast 1 1 Link to comment
brunodiazcast Posted September 21, 2020 Share Posted September 21, 2020 (edited) 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; } Edited September 21, 2020 by brunodiazcast Link to comment
Missyc Posted September 21, 2020 Share Posted September 21, 2020 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! 😞 Link to comment
tuanphan Posted September 24, 2020 Share Posted September 24, 2020 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. Or send to forum message 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
Flutes_Flutists Posted August 2, 2021 Share Posted August 2, 2021 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
tuanphan Posted August 3, 2021 Share Posted August 3, 2021 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. Or send to forum message 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
Flutes_Flutists Posted August 3, 2021 Share Posted August 3, 2021 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
tuanphan Posted August 5, 2021 Share Posted August 5, 2021 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; } } Flutes_Flutists 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Flutes_Flutists Posted September 3, 2021 Share Posted September 3, 2021 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! Susana_SQSP 1 Link to comment
Recommended Posts
Posted by tuanphan,
This solution worked out for many users.
Recommended by SpencerC
0 reactions
Go to this post
Create an account or sign in to comment
You need to be a member in order to leave a comment