Shop Variant - Do Not show thumbnail

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? 

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

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.

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.

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)

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

Cate, that worked like a charm! Thank you for your help. 
And Paul, I appreciate you working through it as well.

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.