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

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


pdancewear

Question

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. 

Link to post
  • Answers 16
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 p

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

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

Posted Images

16 answers to this question

Recommended Posts

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

design-carousel-product-7-1.png.38bd8fce14c0e6839f9391846862508e.png

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;
  }
}

 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post
  • 0

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?

spacer.png

Edited by paul2009

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post
  • 0

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. 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

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

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

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

Edited by paul2009

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

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

Link to post
  • 0

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.

design-carousel-product-7-1.png.38bd8fce14c0e6839f9391846862508e.png

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;
  }
}

 

 

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

spacer.png

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post
  • 0

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

 

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