A stacked product gallery on mobile

16 Oct

How can I scroll through product images on Squarespace?

I love the product detail page layouts available on Squarespace 7.1 but they are relatively limited for mobile users.

For example, although you can have a gallery of product images for each product, the mobile page layout will hide them all behind one another, in a swipeable slideshow like this:

If you look really carefully, you’ll see “1/3” in the top right corner, indicating that this is the first of three images. But, if you blink, you’ll miss this tiny detail, as well as the left and right arrowheads midway down the image.

In user tests, most users aren't aware of the additional images and this issue can seriously impact your sales.

So, what can you do?

In the section settings, if you change the gallery Design option from Slideshow to Stacked, it will only affect the desktop view! The mobile gallery doesn’t change.

Custom CSS for a Stacked Gallery

Here’s my interim solution until Squarespace improve this.

First, edit the Section settings and set the Design to Stacked.

If you add the following to your Custom CSS panel, it should stack the images instead.

  
    /************************************** 
Stacked product images on mobile
Copyright SF Digital https://sf.digital
Use freely in your Custom CSS but  
do NOT re-publish.
**************************************/
@media screen and (max-width:767px) {

  .ProductItem-gallery-slides-item {
    visibility: visible!important;
    position: unset;
  }
  
  .ProductItem-gallery-slides:before {
    padding-bottom: 0!important; 
  }
  
  .ProductItem-gallery-carousel-controls {
    display:none!important;
  }
  
  .ProductItem-gallery-current-slide-indicator {
    display: none;
  }
  
  section.ProductItem-gallery {
    pointer-events: none;
  }
  
}

  
  

Did this help?

Code