nycmonkey Posted October 19, 2019 Share Posted October 19, 2019 Hello - I would love to have the Thumbnails (alternative images) on all my product pages to appear on the side of the Main product image (screenshot example attached). They are currently on the bottom, and will not be visible on many screens unless you scroll down. Let me know if anyone has a CSS code to make this happen? Also, is there a code I could add so that clicking on the left or right side of the Main image would show the next/previous image? Thanks so much! Link to comment
brandon Posted October 20, 2019 Share Posted October 20, 2019 Hi @nycmonkey. Yes, moving the thumbnails is doable. Give this a shot, inserted via the CSS Editor: .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%; } As for next/previous indicators, that'll take some custom development work. Nothing a dev. couldn't do for you short of a couple hours. Alternatively you can make Squarespace galleries swipeable. It wouldn't have indicators or be clickable on desktop, but if most of your users are on mobile, that might not be a big deal. Note that white space will be created below the main image with the thumbnail strip height exceeds it. With a bit more work, it'd be possible to match the height of the thumbnail strip to that of the main image, and make the strip scrollable, thereby removing the gap when there are a lot of thumbnails Hope that helps. -Brandon If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
sageandsquare Posted October 25, 2019 Share Posted October 25, 2019 Hi Brandon, Wondering if you knew how to do the same thing for a Slideshow Gallery? Am using a Brine template. Thanks in advance, Jo Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.