Show All product variants as single products + hide other variants pictures when color is selected

Store Design
, , , ,

Topic summary

A user seeks help with three Shopify store customization requests:

1. Remove white border on hover:
When hovering over product images that display a second image, an unwanted white border appears. This is likely solvable with CSS.

2. Display all variants as individual products:
The goal is to show each product variant separately on collection pages without creating duplicate product listings. Previous attempts using filter apps didn’t achieve the desired result.

3. Hide non-selected variant images:
Once a color variant is selected, only that variant’s images should display. The existing variant gallery feature doesn’t work as expected.

Bonus request: Display variant images in a scrollable vertical list below the main image instead of a carousel.

Response provided:
Another user offered solutions including:

  • CSS to remove the hover border
  • Code example showing how to loop through variants to display them separately on collection pages
  • JavaScript approach for filtering variant images based on selection

The discussion remains open with implementation details pending.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I am looking to do a few things here and hopefully someone can help me achieve all of these three points.

First of all, probably the simplest one. I would like to be able to remove the white border appearing when I HOVER product image and it displays the second product image.

Screenshot 2025-04-30 at 02.01.55.png
Screenshot 2025-04-30 at 02.01.55.png1150×912 123 KB

Second:
I would like to be able to display ALL VARIANTS as single products without duplicating them. Did try with a filter app and it wasn’t the expected result.

third:

I would like to hide other variant pictures once a color is selected. I’ve already added variant gallery, however this option doesn’t seems to work like I would like it do be displayed. (Bonus) It would be a bonus if the variant images can be listed down under the main image and can be scrolled instead of a carousel. Otherwise Carousel is fine

www.toujoursaim.com

pass: encorefaim

Thank you very much

2

Hi,

Hope this will help

  • Remove White Border When Hovering on Product Image by using CSS
  • Show Each Variant as a Separate Product on Collection Page (without duplicate listings)
    instead of just showing one product, modify loop

Example

{% for product in collection.products %}
  {% for variant in product.variants %}
    {% if variant.available %}
      
        
          
          ## {{ product.title }} - {{ variant.title }}
          

{{ variant.price | money }}

        
      

    {% endif %}
  {% endfor %}
{% endfor %}
  • Show ONLY Selected Variant’s Images (Hide Others) by using JavaScript + Variant Gallery Filtering