afs242 Posted April 4 Share Posted April 4 (edited) I'm working with the Brine template in 7.0 In this shop page- https://www.raehcollection.com/shop/healing-gemstone-bracelet when adding a variant image for a specific product it automatically appears in the product image thumbnails. I want to hide specific thumbnails (not all of them) so that the image only appears when that specific variant is selected. Does anyone know custom css that will allow this? Edited April 4 by afs242 Link to comment
paul2009 Posted April 5 Share Posted April 5 (edited) On 4/5/2023 at 12:53 AM, afs242 said: I want to hide specific thumbnails (not all of them) so that the image only appears when that specific variant is selected. Does anyone know custom css that will allow this? If you are trying to only show the variant thumbnails that are applicable to the selected variant, it won’t be possible to do this with custom CSS. Instead you will need to write some JavaScript that: checks if the page is a PDP (Product Detail Page) waits for the page to load checks the product variant names identifies which thumbnails refer to which variant looks for changes to the variant selection selectively shows or hides the thumbnails in response to a new variant selection. If it helps, I wrote a paid extension called the Product Thumbnail Filter that takes care of this. You can read the specification to see if this will meet your needs. Did this help? Please give feedback by clicking an icon below ⬇️ Edited April 8 by paul2009 Edited for clarity About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
afs242 Posted April 7 Author Share Posted April 7 Thanks for responding Paul. Last week I had came across your Filter in my web search for a solution. It looks like a very useful tool, however there was one line in the description that sounded like it may not do a specific task that I was looking for. All product thumbnails will be shown when no variant has been selected (i.e. when 'Select Colour' is displayed in the dropdown) Perhaps I am reading the filter description incorrectly and it can achieve what I am looking for. Will you confirm if it can/can't based off my below explanation. Thank you. -------- I need all the variant thumbnail images to be hidden. Here are example screen mock-ups. I Would like the first four thumbnails of product w/ props to be showing and the rest of white backdrop variant images hidden. Once variant options are selected I would like the variant thumbnail to remain hidden but have the variant appear in the larger image. The end goal is to reduce the visual clutter of 20 variant thumbnail photos below the larger image at all times. Link to comment
paul2009 Posted April 7 Share Posted April 7 (edited) Can I check that I fully understand your requirements? Do you want the thumbnails that are relevant to the selected variant to be shown, or do you only want the first four thumbnails to be shown on products? If it's just the first four images, this can be achieved with some CSS instead. Edited April 8 by paul2009 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
afs242 Posted April 7 Author Share Posted April 7 Thanks for getting back and trying to clarify with me. I DO want the first four thumbnails (circled in green) to be shown. I do NOT want the thumbnails (circled in red) that are relevant to the selected variant to be shown. When variant is selected it should ONLY show in the larger photo area (circled in blue) Link to comment
catebligh Posted April 7 Share Posted April 7 Here is a workaround in CSS. On desktop, it will show 4 images. On mobile it will show 3 images. When you select the variants, you will see the variant image. .ProductItem-gallery-thumbnails { height: 90px; max-width: 360px; overflow: hidden; } Link to comment
afs242 Posted April 8 Author Share Posted April 8 (edited) Cate, that worked like a charm! Thank you for your help. And Paul, I appreciate you working through it as well. Edited April 8 by afs242 Link to comment
Solution paul2009 Posted April 8 Solution Share Posted April 8 The CSS above is a great workaround for desktop users but, as it is setting a fixed size (height and width) for the set of thumbnails, it will not work reliably on other devices, including some mobiles and tablets that have different screen sizes. For example, it may show 3 thumbnails on smaller mobiles, or 2 thumbnails on a tablet (see the tests below): . If you would like all four thumbnails to be shown on all devices, it would be better to hide all except the first four thumbnails. This should be more reliable on all devices, regardless of size or layout: /* Show upto 4 product thumbnails */ .ProductItem-gallery-thumbnails-item { display:none; } .ProductItem-gallery-thumbnails-item:nth-of-type(1), .ProductItem-gallery-thumbnails-item:nth-of-type(2),.ProductItem-gallery-thumbnails-item:nth-of-type(3),.ProductItem-gallery-thumbnails-item:nth-of-type(4), { display:inline-block; } Did this help? Please give feedback by clicking an icon below ⬇️ About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
afs242 Posted April 8 Author Share Posted April 8 Great point Paul, that code works splendidly and does solve potential viewing challenges on other devices. I appreciate you both chiming in with ideas and solves. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment