afs242 Posted April 4, 2023 Share Posted April 4, 2023 (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, 2023 by afs242 Link to comment
paul2009 Posted April 5, 2023 Share Posted April 5, 2023 (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, 2023 by paul2009 Edited for clarity About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
afs242 Posted April 7, 2023 Author Share Posted April 7, 2023 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, 2023 Share Posted April 7, 2023 (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, 2023 by paul2009 About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
afs242 Posted April 7, 2023 Author Share Posted April 7, 2023 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, 2023 Share Posted April 7, 2023 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, 2023 Author Share Posted April 8, 2023 (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, 2023 by afs242 Link to comment
Solution paul2009 Posted April 8, 2023 Solution Share Posted April 8, 2023 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 me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
afs242 Posted April 8, 2023 Author Share Posted April 8, 2023 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
KifS Posted March 3 Share Posted March 3 I have a similar question that may need a slightly different option. I want to totally hide the thumbnail on the product page. I'm using thumbnails kind of like a button on summary blocks since we don't have a product exactly, but a service. So when people click through to the product page, I don't want to have the thumbnail in the list of possible pictures. See here for the summary listing of products and then click on any and you can see the thumbnail is a possible option. https://www.seasailing.org/activities Any ideas on how to adapt css for this? Link to comment
tuanphan Posted March 5 Share Posted March 5 On 3/3/2024 at 7:26 AM, KifS said: I have a similar question that may need a slightly different option. I want to totally hide the thumbnail on the product page. I'm using thumbnails kind of like a button on summary blocks since we don't have a product exactly, but a service. So when people click through to the product page, I don't want to have the thumbnail in the list of possible pictures. See here for the summary listing of products and then click on any and you can see the thumbnail is a possible option. https://www.seasailing.org/activities Any ideas on how to adapt css for this? You can use this code to Website > Website Tools > Custom CSS /* Hide thumbnails */ .tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-thumbnails { display: none !important; } paul2009 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KifS Posted March 5 Share Posted March 5 @tuanphan I see what that does which kind of works. It hides the thumbnails below the slideshow (or carousel). You can still scroll through the images and see the product button (2nd image in link below) that way. Is there an option to entirely hide specific images from the product view, but have them as a thumbnail still? If not. It's fine. https://www.seasailing.org/sea-store/p/sail-cards-pdjw7-h77d2 Link to comment
tuanphan Posted March 8 Share Posted March 8 On 3/5/2024 at 10:44 PM, KifS said: @tuanphan I see what that does which kind of works. It hides the thumbnails below the slideshow (or carousel). You can still scroll through the images and see the product button (2nd image in link below) that way. Is there an option to entirely hide specific images from the product view, but have them as a thumbnail still? If not. It's fine. https://www.seasailing.org/sea-store/p/sail-cards-pdjw7-h77d2 You mean hide this image? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KifS Posted March 8 Share Posted March 8 Yes. We have a similar product "button" as thumbnail for each item, and I don't really want it showing up in the product page in the slide show or carousel. If it's a major hassle, it's not the biggest deal, but if there was some code to limit it, I'd try that. Link to comment
tuanphan Posted March 10 Share Posted March 10 If hide second image, it will show a white blank If you still want to hide it, use this CSS code div.ProductItem-gallery-slides-item:nth-child(4) { display: none; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KifS Posted March 16 Share Posted March 16 Got it. I think I'll leave it alone. I was trying to see if I could just prevent it from being considered at all. But seems like not. Thanks as always! 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