Jump to content

Product carousel arrows get lost on mobile

Recommended Posts

  • Replies 3
  • Views 1.7k
  • Created
  • Last Reply

Hey @xavier-cusso.

On a desktop, the arrows are the visual cue to let users know that they can click the image to advance the carousel, but that doesn't work on mobile.

On mobile devices, the carousel becomes swipeable; it cannot be tapped to advance it. In the circumstances the arrows could make for a bad user experience by suggesting an action that doesn't work.

That said, if anyone at Squarespace is listening, I'd personally like to see a stronger visual cue on mobile devices, to indicate this is a carousel. Perhaps some dots or dashes along the bottom of the image, or the hint of the other images at the sides.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 1 month later...

I am having the exact same problem, it basically renders my webshop useless on mobile. An integrated shop & automatic responsive design were the key reasons I chose Squarespace, but seems like with 7.1 my timing might have been poor. Disappointing! Squarespace folks, please, give us some control back over this display in 7.1!

Link to comment
  • 8 months later...

Hi! I found this answer from @tuanphan and it seems to have given me arrows back to the mobile version, super frustrated here too!



/* 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;

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.