Jump to content

Product Image Rotator

Recommended Posts

Site URL: https://www.mbfpetshop.com

I am using the Hyde template and have not seen anywhere where you can have the images of your product automatically rotate when somebody is on the product page.

A lot of customers are telling me they didnt even know there was multiple images per product because they dont see them below the 1st photo of the product.

Is there anyway to make the product images rotate through when somebody is on the product page or at least show arrows on the 1st photo to show the customer that there are more??

Link to comment
18 hours ago, tuanphan said:

Hi. It looks like you solved this? I see thumbnails here.

image.thumb.png.6cdf6e861b5541f75eaf1cf3c89973c4.png

Yeah it is set to the slideshow option right now, which is fine for mobile because the additional 4-5 photos of the product are easy to see. The issue comes on desktop where the first image is so large that the customer has to scroll down below the fold to see the additional photos.

I've gotten feedback from a few people who have used the site on desktop and the common theme is that many people don't scroll down the page to see that there are more photos. That's why I was seeing if there was a way to set the product photos to carousel for desktop, not slideshow, so that the images automatically rotate every few seconds similar to the social media block that I put on the homepage of the site.

Edited by mbfpetshop
Link to comment
3 hours ago, mbfpetshop said:

Yeah it is set to the slideshow option right now, which is fine for mobile because the additional 4-5 photos of the product are easy to see. The issue comes on desktop where the first image is so large that the customer has to scroll down below the fold to see the additional photos.

I've gotten feedback from a few people who have used the site on desktop and the common theme is that many people don't scroll down the page to see that there are more photos. That's why I was seeing if there was a way to set the product photos to carousel for desktop, not slideshow, so that the images automatically rotate every few seconds similar to the social media block that I put on the homepage of the site.

So far there is no carousel option on product slides, do you think a scroll-down indicator icon on main image may help?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
1 hour ago, bangank36 said:

So far there is no carousel option on product slides, do you think a scroll-down indicator icon on main image may help?

That could help, I could also just make the first photo smaller so it pushes the additional product photos up the page a bit.

The issue with that is that it means I would have to go resize over 125 images and then re-upload them all and do the metatags again haha I was hoping to avoid that.

I know squarespace is somewhat new to the e-commerce side of design functions so hopefully adding a carousel to product images is in the works 

Link to comment
1 hour ago, mbfpetshop said:

That could help, I could also just make the first photo smaller so it pushes the additional product photos up the page a bit.

The issue with that is that it means I would have to go resize over 125 images and then re-upload them all and do the metatags again haha I was hoping to avoid that.

I know squarespace is somewhat new to the e-commerce side of design functions so hopefully adding a carousel to product images is in the works 

Can use css to reduce the main image, also did you try option to display the thumbnail on  the left of the image?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...
On 3/9/2021 at 5:01 AM, mbfpetshop said:

I did try the thumbnail display but that didnt work. Im not too familiar with CSS to be able to really know what Im doing to tweak things haha 

 

 

Hi. Do you still need help on this?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

This is not an auto play solution but it should reduce folks not realizing there are more images. It brings the thumbnails up above the big image.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  @media screen and ( min-width: 641px) {
  
    .ProductItem-gallery {
    
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      
      -webkit-box-orient : vertical;
      -webkit-box-direction : reverse;
      -ms-flex-direction : column-reverse;
      flex-direction : column-reverse;
      
      gap : 1rem;
      
      }
    }
    
  </style>

This is for v7.0 using the Brine template family.

Let us know how it goes.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
On 3/19/2021 at 10:17 PM, tuanphan said:

Hi. Do you still need help on this?

Hello! Yes, if there was a way to make add a carousel to the product pages. @creedon also found a work around for it by giving me code to place the additional images above the thumbnail image which helps a ton--thank you!

I think the images above help on desktop, but it looks a little wonky on mobile.

Creedon, is there a way for you to adjust that code to have the smaller images be on the left side of the main thumbnail instead of above or below?

Edited by mbfpetshop
Link to comment
Quote

I think the images above help on desktop, but it looks a little wonky on mobile.

I updated my code to turn the effect off on mobile.

Quote

is there a way for you to adjust that code to have the smaller images be on the left side of the main thumbnail instead of above or below?

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  /*
  
    begin move product gallery thumbnails to side
    
    SS Version : 7.0
    Template   : Brine template family
    
    */
    
    @media screen and ( min-width: 641px) {
    
      .ProductItem-gallery {
      
        display : -webkit-box;
        display : -ms-flexbox;
        display : flex;
        
        -webkit-box-orient : horizontal;
        -webkit-box-direction : reverse;
        -ms-flex-direction : row-reverse;
        flex-direction : row-reverse; /* replace row-reverse with row to swap
                                         sides */
        gap : 0.5rem;
        
        }
        
      .ProductItem-gallery-slides {
      
        width : 100%;
        
        }
        
      .ProductItem-gallery-thumbnails {
      
        display : -webkit-box;
        display : -ms-flexbox;
        display : flex;
        
        -webkit-box-orient : vertical;
        -webkit-box-direction : normal;
        -ms-flex-direction : column;
        flex-direction : column;
        
        gap : 0.25rem;
        margin : 0;
        
        }
        
      .ProductItem-gallery-thumbnails-item {
      
        margin : 0;
        
        }
      }
      
    /* end move product gallery thumbnails to side */
    
  </style>

This is for v7.0 using the Brine template family.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
1 hour ago, creedon said:

I updated my code to turn the effect off on mobile.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.


<style>

  /*
  
    begin move product gallery thumbnails to side
    
    SS Version : 7.0
    Template   : Brine template family
    
    */
    
    @media screen and ( min-width: 641px) {
    
      .ProductItem-gallery {
      
        display : -webkit-box;
        display : -ms-flexbox;
        display : flex;
        
        -webkit-box-orient : horizontal;
        -webkit-box-direction : reverse;
        -ms-flex-direction : row-reverse;
        flex-direction : row-reverse; /* replace row-reverse with row to swap
                                         sides */
        gap : 0.5rem;
        
        }
        
      .ProductItem-gallery-slides {
      
        width : 100%;
        
        }
        
      .ProductItem-gallery-thumbnails {
      
        display : -webkit-box;
        display : -ms-flexbox;
        display : flex;
        
        -webkit-box-orient : vertical;
        -webkit-box-direction : normal;
        -ms-flex-direction : column;
        flex-direction : column;
        
        gap : 0.25rem;
        margin : 0;
        
        }
        
      .ProductItem-gallery-thumbnails-item {
      
        margin : 0;
        
        }
      }
      
    /* end move product gallery thumbnails to side */
    
  </style>

This is for v7.0 using the Brine template family.

Let us know how it goes.

Thats Perfect!!!!!!! Thank you so much! Ive been trying to work on this solution for a while now and this is helps a lot!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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