How to hide variant pictures in Debut Theme?

Look at picture below , i just want to show the main picture of the variant when selected and hide all the other thumbnails of the other variants as to not confuse the customers

Thank You

1 Like

The code block you are looking for starts on line 72 of the product-template.liquid file and ends on line 130.

You can delete this section of code, comment it out (as below) or maybe the simplest change is just to hide it with css.

Here’s is the css option, added style=“display:none;” to the root element on line 72:


Here’s the whole block to be deleted entirely or commented out (using at the end):


          

            {% if enable_thumbnail_slides == true %}
              
            {% endif %}

            

              {% if enable_thumbnail_slides == true %}
                

              {% endif %}

              {% for media in product.media %}
                - {%- capture thumbnailAlt -%}
                          {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                            {{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                          {%- elsif media.media_type == 'model' -%}
                            {{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                          {%- else -%}
                            {{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                          {%- endif -%}
                        {%- endcapture -%}

                      
                        {%- if media.media_type == 'video' or media.media_type =='external_video' -%}
                        

                            {% include 'icon-video-badge-full-color' %}
                        

                        {%- endif -%}
                        {%- if media.media_type == 'model' -%}
                        
                            {% include 'icon-3d-badge-full-color' %}
                        

                        {%- endif -%}
                  
                
              {% endfor %}

              {% if enable_thumbnail_slides == true %}
                

              {% endif %}
            

            {% if enable_thumbnail_slides == true %}
              
            {% endif %}
          

        

2 Likes

Do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
.thumbnails-wrapper{
    display: none !important;
}

Additionally, you may want to take a look at this blog post that teaches you how to add a swiping feature for your product page image, making it more user-friendly and, subsequently, generating more sales.

It also has the feature you’re looking for (hiding thumbnails) at the customize page, which you can easily turn on/off at any time.

Kind regards,
Diego

2 Likes

Thank you guys !

Hi this worked for me but now the title of the product and the information is below the thumbnail, is it possible leave that information as it was and hiding the variant pictures?