Jump to content

product page photo thumbnails

Recommended Posts

Site URL: https://www.christianthiess.com/shop/fineart-druck-groglockner-bei-nacht

Dear Sir or Madam,

thanks for taking time, to have a look into my current issues.

My question is about the pictures shown on the product page.

 

Is there any way to change the following behaviour? maybe through custom CSS?

I'd like to not show all pictures one after another in full size. I'd rather like to show just one and have several thumbnails at the pictures' left side and arrows as overlay over the current picture to navigate through the photos.

thank you in advance,

best regards, Christian

Link to comment
4 hours ago, ChristianT said:

Pictures on the product page: I'd like to not show all pictures one after another in full size. I'd rather like to show just one and have several thumbnails at the pictures' left side

Hi Christian

Yes. As you are using a Brine-family template on Squarespace 7.0 you'll find this setting in Design > Site Styles.

Scroll down to the section titled Products: Gallery.

Change the Design setting from Stacked to Slideshow.

When you save the changes and refresh the page, you should have one large image and (if you have further images) thumbnails. In the same section you'll find settings for Thumbnail Alignment (Left, Center, Right), Thumbnail WidthThumbnail Spacing and so on.

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

Hi Paul,

thank you very much for these details. I've already changed that to your suggested settings. Works great!

Is there a way to:

- show the thumbnails on the left side of the picture; instead of at the bottom of the picture left aligned?

- show the image with its original ratio (length x width) instead of the given formats like 1:1, ... - this would be especially useful as I mix horizontal with vertical ratios. And as a workaround I put the photos on a white square background.

Link to comment
6 minutes ago, ChristianT said:

Is there a way to show the thumbnails on the left side of the picture; instead of at the bottom of the picture left aligned?

There isn't a built in option to do this on Squarespace 7.0 (it's an option on the newer Squarespace 7.1 template) but you can achieve this with some Custom CSS.

Go to Design > Custom CSS and add the following. When you save and refresh the page, they should be on the left. 

.ProductItem-gallery {
  display: flex;
}
.ProductItem-gallery-slides {
  order: 1;
  width: 100%;
  height: 100%;
  margin-left: 4%;
}
.ProductItem-gallery-thumbnails {
  margin-left: 0;
  width: 20%;
  max-width: 90px;
}
.ProductItem-gallery-thumbnails-item {
  margin-left: 0;
  width: 100%;
}

move-product-thumbnails-brine.thumb.gif.e5f88443ff8730d0391a94a195b8944c.gif

 

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

works like a charm. thank you for the code!

one question arises though ...

see my product-page

my first picture is a landscape-oriented photo on a square white background. the second photo is the original one ( landscape-oriented). is there a chance to configure the layout that the second one is shown in it's original ratio? like landscape-oriented? maybe I'll add a third one, portrait-oriented, but this shouldn't be shown as landscape photo. for example if I add a picture which shows a room with a bench and the picture on the wall - a classic vertical image.

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.