Adding 'next' and 'previous' arrows to a product image slideshow

I am trying to add 'next' and 'previous' arrows to my product image slideshows on Squarespace. It is not an option through the Site Styles panel - which is really frustrating. I want it to be readily apparent to customers that there are several pictures to click through on my product pages, without the customer having to scroll down and discover the thumbnails of the other images below the main image. Any help would be greatly appreciated! Thanks. 

Can you share the link to your page?

can you share the answer to this please?

hi, I am. looking to add slide show to the images on the shop page of my site. can this be done? and how?

nomadandking.com/shop

Thanks,

Spencer

Hi Spencer

Can you explain a little further?

Do you want to add a slideshow to the product images on the product detail page (see below), or do you want to do something on the product list page?

Hi,

I want to add that to both the product page, and the store page. so customers can browse the products images with out clicking on the product.

Thanks.

Unfortunately Squarespace only loads two images for each product on the Product List Page. These images are the primary image and the alternate image that is shown on hover. The other product images aren't available and so cannot be shown on the list page. 

On 5/14/2020 at 10:30 AM, paul2009 said:

Do you want to add a slideshow to the product images on the product detail page (see below), or do you want to do something on the product list page?

@paul2009 Can there be arrows added to a slideshow without losing the pictures at the bottom? I have attached an example from our website. As you can see below the product image there are all of the pictures lined up. We would just like to add arrows to the main picture so people can slide through. Here is the URL: https://www.enjoysnacks.com/shop/candies/sour-lychee. Any help would be greatly appreciated!

On 6/23/2020 at 1:46 AM, galangster said:

Can arrows be added to a slideshow without losing the pictures at the bottom?

On squarespace 7.1, the style options only allow you to have:

• a Carousel (with arrows) but without the image thumbnails, or
• a Static image with product thumbnails (known as Slideshow).

However, you can add the thumbnails to the Carousel with some code. First, view a product and click EDIT DESIGN to launch the styles panel. Within PRODUCTS: ITEM, set the Design mode to Carousel.

Save your settings and then add this to Design > Custom CSS:

@media screen and (min-width: 768px) {
  .tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-thumbnails {
    display: flex!important;
    margin-top: 10px;
  }
}

On 6/25/2020 at 10:33 AM, paul2009 said:

@media screen and (min-width: 768px) {   .tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-thumbnails {     display: flex!important;     margin-top: 10px;   } }

@paul2009 It works!! Thank you so much. I have a question. The thumbnails are outside of the box, here is a product example of it: https://www.enjoysnacks.com/shop/candies/sour-lychee. Is there anyway to fix this? Thanks again!

On 6/27/2020 at 4:03 AM, galangster said:

The thumbnails are outside of the box. Is there anyway to fix this?

This is a bug since 23 June. Squarespace have escalated it for investigation.

Whenever you experience something that doesn't look right, it's a good idea to report it to Squarespace Customer Care. The more of us who report an issue, the quicker that they realise there is an issue. You can reach out to them here.

UPDATE 28 June 2020:  This is related to an issue with the variant thumbnails on Squarespace's platform. They have reported this to their Engineering team, and they’re currently prioritising the issue.

34 minutes ago, paul2009 said:

This is a bug since 23 June. Squarespace have escalated it for investigation.

Whenever you experience something that doesn't look right, it's a good idea to report it to Squarespace Customer Care. The more of us who report an issue, the quicker that they realise there is an issue. You can reach out to them here.

@paul2009 We will do that, thanks for the help!

Hi @paul2009

Thanks for sharing the solution.

You mentioned that Squarespace 7.1 has the Design > Carousel feature? I checked my version and it is 7.0. Is there a way for me to implement that Carousel arrows > on my Website ? I checked and my Product Design only shows Slideshow and stacked.

On 6/26/2020 at 6:33 AM, paul2009 said:

On squarespace 7.1, the style options only allow you to have:

• a Carousel (with arrows) but without the image thumbnails, or
• a Static image with product thumbnails (known as Slideshow).

However, you can add the thumbnails to the Carousel with some code. First, view a product and click EDIT DESIGN to launch the styles panel. Within PRODUCTS: ITEM, set the Design mode to Carousel.

Save your settings and then add this to Design > Custom CSS:

@media screen and (min-width: 768px) {
  .tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-thumbnails {
    display: flex!important;
    margin-top: 10px;
  }
}

 

On 7/9/2020 at 10:27 AM, divar said:

I checked my version and it is 7.0. Is there a way for me to implement that Carousel arrows > on my Website ?

If you are using a Brine-family template on Squarespace 7.0, you can purchase an extension to add carousel arrows to the product images on Product Detail pages.

You'll find full details of our extension on our website here: Product Image Slideshow.

To check which template you are using, see this support article.

Hi @paul2009 quick question — 

I tried adding this code and it doesn't load the thumbnails on mobile for me in 7.1 when I'm on the carousel option. I'm looking to have the thumbnails show up on both desktop and mobile if possible, with the carousel arrows. 

Site URL: https://josh-young-design-house.squarespace.com/shop/p/emma-in-blush

pass: DEMO

Thank you so much for any help!

@media screen and (min-width: 768px) {
  .tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-thumbnails {
    display: flex!important;
    margin-top: 10px;
  }
}

On 2/4/2021 at 3:51 AM, kellyetz said:

I tried adding this code and it doesn't load the thumbnails on mobile for me in 7.1 when I'm on the carousel option. I'm looking to have the thumbnails show up on both desktop and mobile if possible, with the carousel arrows. 

Site URL: https://josh-young-design-house.squarespace.com/shop/p/emma-in-blush

pass: DEMO

Thank you so much for any help!

 

@media screen and (min-width: 768px) {
  .tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-thumbnails {
    display: flex!important;
    margin-top: 10px;
  }
}

Add to Design > Custom CSS

/* Carousel mobile */
@media screen and (max-width:767px) {
.ProductItem-gallery .ProductItem-gallery-scroll {
    display: flex;
}
}

@tuanphan you are amazing!! that worked - thank you SO much

On 6/26/2020 at 2:03 AM, paul2009 said:

On squarespace 7.1, the style options only allow you to have:

• a Carousel (with arrows) but without the image thumbnails, or
• a Static image with product thumbnails (known as Slideshow).

However, you can add the thumbnails to the Carousel with some code. First, view a product and click EDIT DESIGN to launch the styles panel. Within PRODUCTS: ITEM, set the Design mode to Carousel.

Save your settings and then add this to Design > Custom CSS:

@media screen and (min-width: 768px) {
  .tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-thumbnails {
    display: flex!important;
    margin-top: 10px;
  }
}

 

please tell me how to add next/previous button on product-item page version 7.1