SimonOCarrigan Posted February 27, 2020 Share Posted February 27, 2020 Site URL: https://www.simonocarrigan.com.au/shop/never-forget Hi, I’m adding products to my shop, and having problem with the UI disappearing on mobile and/or when the page is viewed in a narrow browser window. The example page to refer to is:https://www.simonocarrigan.com.au/shop/never-forget Viewed on desktop, the seven product images display as clickable thumbnails beneath the image. Viewed on mobile, there are no thumbnails, and also no arrows or much of anything to indicate the images can be slid across. If you squint, you can make out a very faint “1/7” indicator on the first image to load, but there is no cue to the user that they should slide the image with their finger. I can't work out how to change the styling of that overlay to make it more prominent. Further, when you do slide you must be *exactly* horizontal, or your mobile browser will just scroll the whole page up or down, or even navigate forward or back on webpages. Can I just have the thumbnails display on mobile? Or a caption that says “1/7 - swipe” “3/7 - swipe” etc.? I can only find one relevant article on the forums:https://forum.squarespace.com/topic/155802-product-carousel-arrows-get-lost-on-mobile/#comment-345574 which discussed the same problem, with no solution. Can this be logged as a feature request and/or can someone send me info on how to do a work around? Thanks, Simon Hort_and_Pott 1 Link to comment
Susana_SQSP Posted February 28, 2020 Share Posted February 28, 2020 Hi SimonOCarrigan, Thank you very much for your feedback about the behavior of v7.1 product item pages on mobile. I've forwarded it to the appropriate team. While we can't guarantee feature implementations, customer feedback is an important part of how we continue to improve our platform, so we appreciate your input. Going forward, I'd recommend contacting our Customer Support team for any feedback you have about the platform. As mentioned in the Forum Guidelines we don't usually track feature requests in this forum. Link to comment
imaniluke Posted June 9, 2020 Share Posted June 9, 2020 I am having the same issue! Hort_and_Pott 1 Link to comment
nadya Posted June 15, 2020 Share Posted June 15, 2020 Hi simon! did you resolve this issue? im having the same issue and im at my wits end! any information greatly appreciated. thankyou in advance Hort_and_Pott 1 Link to comment
Guest Posted June 26, 2020 Share Posted June 26, 2020 Having the same issue. The nav arrows are there, they are outside of the page. The 1/4 indicator is too thin to be seen on most background. The force and length of a standard swipe is way too long for most users to intuitively understand that they scroll. Squarespace, please FIX asap. Mobile is more important that desktop, and all your product effort has gone there. Link to comment
tuanphan Posted June 26, 2020 Share Posted June 26, 2020 10 hours ago, buyhistoricprints said: Having the same issue. The nav arrows are there, they are outside of the page. The 1/4 indicator is too thin to be seen on most background. The force and length of a standard swipe is way too long for most users to intuitively understand that they scroll. Squarespace, please FIX asap. Mobile is more important that desktop, and all your product effort has gone there. Just did for two members. If you share link to product page, I can take a look Aashini 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
mintykiwi Posted June 28, 2020 Share Posted June 28, 2020 same issue here. Cannot get any sensible thing to happen with product item images displaying on mobile. Hort_and_Pott 1 Link to comment
mintykiwi Posted June 28, 2020 Share Posted June 28, 2020 To further this, the product item image options in the product items editor have no effect on what happens on mobile. No matter what you select it will always display as the broken carousel mentioned above. The second part of the issue is that the 'Mobile preview' does not actually have any bearing on what the site looks like on an actual mobile browser. For instance I have Lightbox selected but on mobile safari on my iPhone tapping on an image does absolutely nothing. I am having real issues with image cropping and a different display option than carousel on mobile would probably alleviate this. Thanks! Hort_and_Pott 1 Link to comment
just_agnie Posted August 29, 2020 Share Posted August 29, 2020 I had same issue but I was able to RESOLVE it by creating a GIF from the images I wanted to show. It now looks like a slideshow https://www.analyticshacker.com/health-lifestyle/weight-loss-tracker-in-google-sheets-template Link to comment
DavidLadipo Posted September 25, 2020 Share Posted September 25, 2020 Did anyone succeed in finding a workaround to this problem? krista.jewett and Hort_and_Pott 2 Link to comment
tuanphan Posted September 26, 2020 Share Posted September 26, 2020 On 9/25/2020 at 2:55 PM, DavidLadipo said: Did anyone succeed in finding a workaround to this problem? Try adding to Home > Design > Custom CSS for product carousel /* Product slide arrows control */ @media screen and (max-width:767px) { .ProductItem-gallery-carousel-controls { display: flex !important; } /* arrows background */ .ProductItem-gallery-carousel-controls * { background: white; } .ProductItem-gallery-carousel-controls>div { justify-content: center !important; } } sundayclubapparel, krista.jewett, BDW and 1 other 4 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
krista.jewett Posted September 27, 2020 Share Posted September 27, 2020 Perfect! @tuanphan Thank you 🙂 Link to comment
Hort_and_Pott Posted November 18, 2020 Share Posted November 18, 2020 @SimonOCarrigan Yes indeed, it's a real thorn because as you point out, most customers view on mobile now. I only realized recently that many of my viewers weren't getting the important detail visuals because they (my self included) would not have intuitively known to 'slide' over. Will now try @tuanphan recommendation CSS. Please help in developing new mobile shopping customization @SQUARESPACE Link to comment
tuanphan Posted November 18, 2020 Share Posted November 18, 2020 8 hours ago, Hort_and_Pott said: @SimonOCarrigan Yes indeed, it's a real thorn because as you point out, most customers view on mobile now. I only realized recently that many of my viewers weren't getting the important detail visuals because they (my self included) would not have intuitively known to 'slide' over. Will now try @tuanphan recommendation CSS. Please help in developing new mobile shopping customization @SQUARESPACE @squarespace user is not admin. You can submit a feature request here. 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
Chanceispainting Posted December 3, 2020 Share Posted December 3, 2020 @tuanphan Thanks for providing the code to show the arrows on the mobile carousel! Is there any way to make the indicators white? They disappear on product photos with a dark background. Link to comment
tuanphan Posted December 5, 2020 Share Posted December 5, 2020 On 12/3/2020 at 1:15 PM, Chanceispainting said: @tuanphan Thanks for providing the code to show the arrows on the mobile carousel! Is there any way to make the indicators white? They disappear on product photos with a dark background. Can you share link to a product? We can check easier 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
timbm Posted December 6, 2020 Share Posted December 6, 2020 (edited) @tuanphan This code works perfectly on my site, I'm wondering if there is any way to change the colour of the arrows? My image background is white so the arrows aren't visible as they are white. Thanks! Edited December 6, 2020 by timbm Link to comment
gmoss Posted December 7, 2020 Share Posted December 7, 2020 I’m also having this same issue. I added the arrows using that helpful code above, but the arrows are thin and black and don’t show up against the darker background of my photos. Anyone have a coding solution to make these arrows thicker and white? Link to comment
tuanphan Posted December 8, 2020 Share Posted December 8, 2020 On 12/6/2020 at 6:04 PM, timbm said: @tuanphan This code works perfectly on my site, I'm wondering if there is any way to change the colour of the arrows? My image background is white so the arrows aren't visible as they are white. Thanks! 8 hours ago, gmoss said: I’m also having this same issue. I added the arrows using that helpful code above, but the arrows are thin and black and don’t show up against the darker background of my photos. Anyone have a coding solution to make these arrows thicker and white? Can you share link to product in your question? We can check easier 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
timbm Posted December 8, 2020 Share Posted December 8, 2020 @tuanphan Thanks so much the product link is https://www.aikoandco.com.au/shop/p/gsp37w5rtdf1ajnhurs23om7ms11y2 passcode is testpage Link to comment
gmoss Posted December 8, 2020 Share Posted December 8, 2020 13 hours ago, tuanphan said: Can you share link to product in your question? We can check easier I'm such a newbie, I'm not sure how to share this..... my site is not yet live. And I'm not sure I'm comfortable posting a password to the backend here on this public forum. Help? Link to comment
tuanphan Posted December 9, 2020 Share Posted December 9, 2020 20 hours ago, gmoss said: I'm such a newbie, I'm not sure how to share this..... my site is not yet live. And I'm not sure I'm comfortable posting a password to the backend here on this public forum. Help? How to. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment