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

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

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. 

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 1
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 Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
Posted (edited)

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 Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 0

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.

 

Share this post


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 Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


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!

Share this post


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!

Share this post


Link to post
  • 0
Posted (edited)
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 Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


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!

Share this post


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

 

 

Share this post


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 Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


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