Jump to content

Shop Variant - Do Not show thumbnail

Go to solution Solved by paul2009,

Recommended Posts

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 by afs242
Link to comment
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.

 image.thumb.gif.d0d501a9fac6c414a2ddb129fb7d1222.gif

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited 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

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. image.thumb.png.0052a4267d6a9c115a809ee33ae71095.png

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.

image.thumb.png.de39f2b8373a0e74f00222d481bb37b7.png

Link to comment

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

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)image.thumb.png.277056588a54a79404a9d592223cb471.png

Link to comment
  • Solution

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):

image.thumb.png.fedeff15e2e65f894ff43317b4088f5c.png  image.thumb.png.c7d75e36a14e1c1bace82f3f2ee29df9.png . image.thumb.png.4e1b20c91ee3ab76628135d339dbb76f.png

 

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:

image.thumb.png.fedeff15e2e65f894ff43317b4088f5c.png  image.thumb.png.c860f76f76dc2a0216627daa151b328c.png  image.thumb.png.70e590386714023547d84d252bdb37a8.png

/* 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
  • 10 months later...

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

 

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

image.png.03f24e8d41f56203bfe1d559e33c5c20.png

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

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

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.