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

Product Carousel & Slideshow UI and Navigation Arrows Missing on Mobile in 7.1


SimonOCarrigan

Question

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

Link to post
  • Answers 16
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Did anyone succeed in finding a workaround to this problem?

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 narr

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: f

Posted Images

16 answers to this question

Recommended Posts

  • 0

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 post
  • 0

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 post
  • 0
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

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

-- Pour your heart into it

Link to post
  • 0

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!

Screenshot 2020-06-28 at 13.25.44.png

Link to post
  • 0
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;
}
}

 

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

-- Pour your heart into it

Link to post
  • 0

@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 post
  • 0
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.

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

-- Pour your heart into it

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