How can I remove product thumbnails while still offering the variants?

Highlighted
New Member
2 0 1

Hi there -- updating my site and trying to replicate this based on the new shopify parameters. I am using canopy and the new page code is: 

 

<div class="product-gallery half column"
     data-enable-zoom="{{ section.settings.enable_product_image_zoom }}"
     data-full-image-width="{{ featured_image.width }}">

  <div class="main">
    {% for media in product.media %}
	    {%- include 'media' -%}
  
    {% endfor %}

    {%- assign models = product.media | where: 'media_type', 'model' -%}
    {% if models.size > 0 %}
      <script type="application/json" class="model-json">
        {{- product.media | where: 'media_type', 'model' | json -}}
      </script>

        <button
                class="view-in-space"
                data-shopify-xr
                data-shopify-model3d-first-id="{{ models.first.id }}"
                data-shopify-model3d-id="{{ models.first.id }}"
                data-shopify-first-title="{{ product.title | escape }}"
                data-shopify-title="{{ product.title | escape }}"
                data-shopify-xr-hidden>
          {%- include 'icon-3d-badge-full-color' -%}
          <span class="view-in-space__text">{{ 'products.product.view_in_space' | t }}</span>
        </button>
    {% endif %}
  </div>

  {% if product.media.size > 1 and template contains 'product' or section.settings.prod_show_thumbnails != blank %}
    <div class="thumbnails slick-slider--indented-side-icons">
     
      {% for media in product.media %}
      
        <a class="thumbnail thumbnail--media-{{ media.media_type }}"
           href="{{ media.preview_image | img_url: 'master' }}"
           data-src="{{ media.preview_image | img_url: '842x' }}"
           data-full-image-width="{{ media.preview_image.width }}"
           style="width: {{ media.preview_image.aspect_ratio | times: 70 }}px"
           data-media-type="{{ media.media_type }}"
           data-media-id="{{ media.id }}">

          {% include 'responsive-image', image: media.preview_image %}

          {%- if media.media_type == 'video' or media.media_type =='external_video' -%}
            <div class="thumbnail__badge">
              {% include 'icon-video-badge-full-color' %}
            </div>
          {%- endif -%}

          {%- if media.media_type == 'model' -%}
            <div class="thumbnail__badge">
              {% include 'icon-3d-badge-full-color' %}
            </div>
          {%- endif -%}

        </a>
      
      {% endfor %}
    
    </div>
  {% endif %}


</div>

in the past i was able to add the following but inserting it into the new code isn't working. Is it because of the change from images to more general media? 

 

{% unless image.attached_to_variant? %}

 

1 Like
Highlighted
New Member
1 0 0

Thank You So Much ! Very Useful ~

 

0 Likes
Highlighted
New Member
1 0 0

Hi,

 

i was trying this solution but, i can't get it to work.

I'm using boundless theme an would like to hide variant photos from product page so that when someone click on color just main photo changes color.

 

Does anyone else know how to fix this ?

 

Thx

0 Likes
Highlighted
New Member
1 0 0

Hello Liam! Is it possible for you to share the code for this? We are starting a store with lots of variants and the product pages really look cluttered. We have been searching for a way to remove the thumbnails, but keep the variants so when someone selects the product, the corresponding "hidden" variant image is displayed. If not, I understand. Thanks! ~ Rick

0 Likes
Highlighted
Excursionist
50 0 3

Hello,

In my product-template liquid as i don't have the code what you have given.

I added like this:

{% for media in product.media %}
{% unless media.attached_to_variant? %}
<li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} js">
<a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ section.id }}-{{ media.id }}"
{% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>

{%- 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 -%}

<img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
{%- if media.media_type == 'video' or media.media_type =='external_video' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-video-badge-full-color' %}
</div>
{%- endif -%}
{%- if media.media_type == 'model' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-3d-badge-full-color' %}
</div>
{%- endif -%}
</a>
</li>
{% endunless %}
{% endfor %}

still for single variant multiple image thumbnails are showing .can you please tell how to avoid that .

our store url is:https://gully.c2stechs.com/

0 Likes
Highlighted
Excursionist
50 0 3

please provide solution to our problem, we need to have single thumbnail for one product.

 

Based on color swatch the single thumbnail should be displayed for product but not multiple thumbnails

 

please tell me how to do that.

i added code like this

 

<ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}">
{% for media in product.media %}
{% unless media.attached_to_variant? %}

 

but no result.please suggest us

0 Likes
Highlighted
Shopify Partner
38 1 18

@rosandrest wrote:

Minimal template with sections. I edited the sections product-template.liquid at lines 75 & 126.



Thanks for this, I've been fighting with hiding unselected variant images for hours and hours over several months, and ended up with a complete mess of code trying various ways to do it. Turns out, I was putting all of the conditions in too many places, but since you listed the correct output lines locations to modify in the minimal theme I was able to get this change made with what feels like a LOT less coding mess than other solutions I was stumbling through. 

0 Likes
Highlighted
New Member
4 1 0

Hello

I tried this, it successfuly hide variant and keep the feature images however it removes completely the preview image in big and keep only thumbnails ?

0 Likes