Product Image Rotator

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

Hi. Can you share link to a product?

25 minutes ago, tuanphan said:

Hi. Can you share link to a product?

Here you go https://www.mbfpetshop.com/online-shop/tie-dye-pet-bandana

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

18 hours ago, tuanphan said:

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

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.

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?

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 

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?

18 hours ago, bangank36 said:

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

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 

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?

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.

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?

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.

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!