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

How can I make the product page thumbnails stacked to the right of the larger image?

Recommended Posts

To help us to understand what you need, please provide a working link to one of your product pages and an annotated screenshot showing what you’d like to change. 


World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm currently booked until the end of May 2020.
Prebuilt Squarespace Extensions for Squarespace 7.0 and 7.1: Enquiry Form ExtensionDate Picker Extension and Age Verification Extension 
Custom Squarespace Extensions: Tell me about the functionality you need

**NEW** Our popular Wishlist extension is now Squarespace 7.1 compatible.

Share this post


Link to post

I want to put the product gallery/thumbnails in between the large image and the description text block indicated in the screenshot attached.

Screen Shot 2020-01-18 at 5.58.26 PM.png

Share this post


Link to post

Thanks for additional information. The mockup gives me a clear idea of what you've asked for. Unfortunately, I think that moving them like this will cause more problems for you than it solves. Sorry.

If you place the thumbnails under the product description you'll have layout problems when the page responds to different devices. Depending on the amount of text and the size of the device, the thumbnails are likely to appear much lower than the main product image (see below):

Before and After:

Current Layout       pan-loaf-product-moved.thumb.png.c49bda661024a3e55deefda69fac637c.png

It may help if you can explain why  you want to reposition the thumbnails. What's driving you towards that as the solution?

For example, is the issue is that the thumbnails appear 'below the fold' and so aren't seen by a percentage of potential customers? That's an issue for a lot of store owners. If that's the case for you, then a better solution may be to show the thumbnails in place of the large image by making it into a slideshow. If this interests you, I have a Squarespace Extension (Product Slideshow) that does this on your template (Brine - Squarespace 7.0). It would then look like this:

spacer.png

If there's another reason or something else you want to try, do let me know.

-Paul

Edited by paul2009

World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm currently booked until the end of May 2020.
Prebuilt Squarespace Extensions for Squarespace 7.0 and 7.1: Enquiry Form ExtensionDate Picker Extension and Age Verification Extension 
Custom Squarespace Extensions: Tell me about the functionality you need

**NEW** Our popular Wishlist extension is now Squarespace 7.1 compatible.

Share this post


Link to post

Related Questions with Possible/Related Answers:

  • https://forum.squarespace.com/topic/151557-brine-productsgallery-moving-alternative-imagesthumbnails-to-the-right-of-the-main-image/#comment-332321
  • https://forum.squarespace.com/topic/8841-feature-req-product-gallery-thumbnail-layout-location/?tab=comments#comment-50080

Other Related Questions:

  • https://forum.squarespace.com/topic/1551-moving-product-thumbnails-brine-template/?tab=comments#comment-9130
  • https://forum.squarespace.com/topic/151905-slideshow-gallery-moving-thumbnails-to-the-right-of-the-main-image/#comment-333451

Another Possible Answer:

  • https://www.sqspthemes.com/blog/vertical-product-thumbnail-gallery

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
On 1/19/2020 at 9:02 AM, paul2009 said:

Thanks for additional information. The mockup gives me a clear idea of what you've asked for. Unfortunately, I think that moving them like this will cause more problems for you than it solves. Sorry.

If you place the thumbnails under the product description you'll have layout problems when the page responds to different devices. Depending on the amount of text and the size of the device, the thumbnails are likely to appear much lower than the main product image (see below):

Before and After:

Current Layout       pan-loaf-product-moved.thumb.png.c49bda661024a3e55deefda69fac637c.png

It may help if you can explain why  you want to reposition the thumbnails. What's driving you towards that as the solution?

For example, is the issue is that the thumbnails appear 'below the fold' and so aren't seen by a percentage of potential customers? That's an issue for a lot of store owners. If that's the case for you, then a better solution may be to show the thumbnails in place of the large image by making it into a slideshow. If this interests you, I have a Squarespace Extension (Product Slideshow) that does this on your template (Brine - Squarespace 7.0). It would then look like this:

spacer.png

If there's another reason or something else you want to try, do let me know.

-Paul

No, I don't want the thumbnails to be below the fold. I want them to be stacked in their own column sandwiched between the large image on the left and the product description on the right 

Share this post


Link to post
9 minutes ago, siweisong said:

I want them to be stacked in their own column sandwiched between the large image on the left and the product description on the right 

In that case, the solution that @brandon offered should be very close to what you need.


World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm currently booked until the end of May 2020.
Prebuilt Squarespace Extensions for Squarespace 7.0 and 7.1: Enquiry Form ExtensionDate Picker Extension and Age Verification Extension 
Custom Squarespace Extensions: Tell me about the functionality you need

**NEW** Our popular Wishlist extension is now Squarespace 7.1 compatible.

Share this post


Link to post
Quote

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

@paul2009 while this works as a first step, I would like to move the thumbnails to the right of the large image. How can I do that?

Also why isn't the thumbnail gallery aligned at the top?

Screen Shot 2020-01-20 at 12.07.14 PM.png

Edited by siweisong
forgot to add user

Share this post


Link to post
On 1/20/2020 at 12:06 PM, paul2009 said:

In that case, the solution that @brandon offered should be very close to what you need.

I photoshopped a screenshot to show you what I want to achieve, hope it helps. If this (the vertical thumbnail gallery) can be shown on desktop only that'd be ideal, since the default placement is better on tablet/mobile, but I would still like to see if it's possible to turn the thumbnail gallery into a carousel on both views. Thank you!!!

Screen Shot 2020-01-23 at 1.29.35 AM.png

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