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
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

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

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

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

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

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.