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

Product Image Rotator


mbfpetshop

Question

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 post
  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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 larg

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 1

Posted Images

13 answers to this question

Recommended Posts

  • 0
Posted (edited)
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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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 

 

 

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

Link to post
  • 0

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 post
  • 0
Posted (edited)
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 post
  • 0
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 post
  • 0
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 post

Create an account or sign in to comment

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


×
×
  • Create New...