Showing product images only for selected variant

Tourist
8 0 2

Greetings. Similar topics have been created but they're either way out of date or don't seem to apply to my theme. My request is very simple - how can I hide all the product thumbnails on the product page other than those relevant to the selected variant?

This seems like something Shopify really should have as built-in functionality, as it strongly disincentivises adding more product images. Some of my product pages look ridiculous with so many thumbnails. 

I'm using the Trademark theme. My product.liquid under Templates is as follows:

{% section 'product-template' %}

{% section 'product-features' %}

{% section 'related-products' %}

And product-template.liquid under Sections is this:

<div class="product"
     id="product-{{ product.id }}"
     data-allow-selecting-sold-out-variants="{% if section.settings.allow_selecting_sold_out_variants %}true{% else %}false{% endif %}"
     data-enable-image-zoom="{% if section.settings.enable_image_zoom %}true{% else %}false{% endif %}">
  <div class="page__content-wrapper page__content-wrapper--force-background">
    <div class="">
      {%- include 'product-meta', for_mobile: true -%}

      <div class="grid grid--large">
        <div class="grid__cell 2/3--lap-and-up">
          {% comment %}
          -----------------------------------------------------
          SLIDESHOW
          -----------------------------------------------------
          {% endcomment %}

          <div class="product__slideshow" data-enable-image-zoom="{% if section.settings.enable_image_zoom %}true{% else %}false{% endif %}">
            {%- assign initial_slide = 0 -%}

            {%- if product.selected_or_first_available_variant.featured_image -%}
              {%- assign initial_slide = product.selected_or_first_available_variant.featured_image.position | minus: 1 -%}
            {%- endif -%}

            <ul class="product__slides list--unstyled" data-initial-slide="{{ initial_slide }}">
              {%- for image in product.images -%}
                {%- if image.alt contains 'youtube.com/embed' or image.alt contains 'player.vimeo.com' -%}
                  <li class="product__slide product__slide--video" data-image-position="{{ forloop.index0 }}" data-image-id="{{ image.id }}" {% unless forloop.first %}style="display: none"{% endunless %}>
                    <div class="product__slide-video-wrapper video-wrapper">
                      <iframe class="product__video" width="560" height="349" src="{{ image.alt }}" frameborder="0" allowfullscreen=""></iframe>
                    </div>
                  </li>
                {%- else -%}
                  <li class="product__slide" data-image-position="{{ forloop.index0 }}" data-image-id="{{ image.id }}" data-mfp-src="{{ image | img_url: '1500x' }}" {% unless forloop.first %}style="display: none"{% endunless %}>
                    <img class="product__slide-image"
                         src="{{ image | img_url: '850x' }}"
                         srcset="{{ image | img_url: '700x' }} 700w, {{ image | img_url: '850x' }} 850w, {{ image | img_url: '1000x' }} 1000w, {{ image | img_url: '1200x' }} 1200w"
                         sizes="(min-width: 35em) 70vw, (min-width: 50em) 50vw, (min-width: 80em) 600px, 100vw"
                         alt="{{ image.alt | escape }}">
                  </li>
                {%- endif -%}
              {%- endfor -%}
            </ul>

            {%- if product.images.size > 1 -%}
              <ul class="product__thumbnails list--unstyled">
                {%- for image in product.images -%}
                  <li class="product__thumbnail {% if forloop.first %}product__thumbnail--active{% endif %}" data-slide-index="{{ forloop.index0 }}">
                    <img class="product__thumbnail-image" src="{{ image | img_url: '160x160' }}" alt="{{ image.alt | escape }}">
                  </li>
                {%- endfor -%}
              </ul>
            {%- endif -%}
          </div>
        </div>

        <div class="grid__cell 1/3--lap-and-up">
          <div class="product__details">
            {%- include 'product-meta', for_mobile: false -%}

            {% comment %}
            -----------------------------------------------------
            PRODUCT FORM
            -----------------------------------------------------
            {% endcomment %}
            <form class="product__form" id="product-{{ product.id }}__form" action="/cart/add" method="POST" enctype="multipart/form-data">
              <div class="product__variants">
                {%- if product.variants.size > 1 -%}
                  {%- assign show_variants_selectors = true -%}
                {% elsif product.has_only_default_variant == false and section.settings.hide_variants_if_only_one == false %}
                  {%- assign show_variants_selectors = true -%}
                {%- else -%}
                  {%- assign show_variants_selectors = false -%}
                {%- endif -%}

                {%- if show_variants_selectors -%}
                  {%- for option in product.options_with_values -%}
                    <div class="form__control">
                      <label for="single-option-selector-{{ forloop.index0 }}" class="form__label">{{ option.name }}</label>

                      {%- assign color_label = 'color,colour,couleur,colore,farbe,색,色,färg,farve' -%}
                      {%- assign size_label = 'size,taille,bröße,tamanho,tamaño,サイズ' -%}

                      {%- assign downcase_option = option.name | downcase -%}

                      {%- if section.settings.show_color_swatch and color_label contains downcase_option -%}
                        <ul class="product__available-colors list--unstyled" data-selector-type="color">
                          {%- for value in option.values -%}
                            {%- include 'variant-option-properties', value: value -%}

                            {%- assign downcase_value = value | downcase -%}
                            {%- assign color_swatch_white = false -%}

                            {%- if 'white,blanc,blanco,白,weiß,vit,branco' contains downcase_value -%}
                              {%- assign color_swatch_white = true -%}
                            {%- endif -%}

                            <li class="product__color {% unless allow_variant_selection %}product__color--unavailable{% endunless %}" title="{{ value }}">
                              <input id="color-swatch-{{ forloop.index0 }}" {% unless allow_variant_selection %}disabled{% endunless %} class="single-option-selector" name="single-option-selector-{{ forloop.parentloop.index0 }}" data-option-index="option{{ forloop.parentloop.index }}" type="radio" {% if option.selected_value == value %}checked="checked"{% endif %} value="{{ value | escape }}">
                              <label {% if allow_variant_selection %}tabindex="0"{% endif %} class="color-swatch {% if color_swatch_white %}color-swatch--white{% endif %}" for="color-swatch-{{ forloop.index0 }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.png' | asset_url }})"></label>
                              {%- include 'icon' with 'tick' -%}
                            </li>
                          {%- endfor -%}
                        </ul>
                      {%- elsif section.settings.show_size_swatch and size_label contains downcase_option -%}
                        <ul class="product__available-sizes list--unstyled" data-selector-type="size">
                          {%- for value in option.values -%}
                            {%- include 'variant-option-properties', value: value -%}

                            <li class="product__size {% unless allow_variant_selection %}product__size--unavailable{% endunless %}">
                              <input id="size-{{ forloop.index0 }}" {% unless allow_variant_selection %}disabled{% endunless %} type="radio" class="single-option-selector" name="single-option-selector-{{ forloop.parentloop.index0 }}" data-option-index="option{{ forloop.parentloop.index }}" {% if option.selected_value == value %}checked="checked"{% endif %} value="{{ value | escape }}">
                              <label {% if allow_variant_selection %}tabindex="0"{% endif %} for="size-{{ forloop.index0 }}" class="product__size-label">{{ value }}</label>
                            </li>
                          {%- endfor -%}
                        </ul>
                      {%- else -%}
                        <div class="styled-select styled-select--secondary">
                          {%- include 'icon' with 'dropdown-arrow' -%}

                          <select class="single-option-selector" id="single-option-selector-{{ forloop.index0 }}" data-option-index="option{{ forloop.index }}" data-selector-type="select">
                            {%- for value in option.values -%}
                              {%- include 'variant-option-properties', value: value -%}

                              <option value="{{ value | escape }}" {% unless allow_variant_selection %}disabled{% endunless %} {% if option.selected_value == value %}selected="selected"{% endif %}>{{ value }}</option>
                            {%- endfor -%}
                          </select>
                        </div>
                      {%- endif -%}
                    </div>
                  {%- endfor -%}

                  <div class="form__control hidden-lap-and-up">
                    <label class="form__label">{{ 'product.form.price' | t }}</label>

                    <div class="product__prices">
                      {%- if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price -%}
                        <span class="product__price product__price--new h4" data-money-convertible>{{ product.selected_or_first_available_variant.price | money }}</span><!--
                        --><span class="product__price product__price--old h4" data-money-convertible>{{ product.selected_or_first_available_variant.compare_at_price | money }}</span>
                      {%- else -%}
                        <span class="product__price h4" data-money-convertible>{{ product.selected_or_first_available_variant.price | money }}</span>
                      {%- endif -%}
                    </div>
                  </div>

                  <div class="no-js form__control">
                    <label for="product-select-{{ product.id }}" class="form__label">{{ 'product.form.variant_label' | t }}</label>

                    <div class="styled-select styled-select--secondary">
                      {%- include 'icon' with 'dropdown-arrow' -%}

                      <select id="product-select-{{ product.id }}" name="id">
                        {%- for variant in product.variants -%}
                          <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} {% unless variant.available %}disabled="disabled"{% endunless %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
                        {%- endfor -%}
                      </select>
                    </div>
                  </div>
                {%- else -%}
                  <input type="hidden" name="id" data-sku="{{ product.selected_or_first_available_variant.sku }}" value="{{ product.selected_or_first_available_variant.id }}">
                {%- endif -%}
              </div>

              {%- if section.settings.show_quantity_selector -%}
                <div class="form__control">
                  <label class="form__label">{{ 'product.form.quantity' | t }}</label>

                  <div class="quantity-selector" >
                    <a href="#" data-action="decrease-product-quantity" title="{{ 'product.form.decrease_quantity' | t }}">{%- include 'icon' with 'minus' -%}</a>
                    <span class="quantity-selector__current-quantity">1</span>
                    <a href="#" data-action="increase-product-quantity" title="{{ 'product.form.increase_quantity' | t }}">{%- include 'icon' with 'plus' -%}</a>
                  </div>
                </div>
              {%- endif -%}

              <input type="hidden" name="quantity" value="1">

              {%- if product.selected_or_first_available_variant.available -%}
                <button type="submit" class="product__add-to-cart button button--primary">
                  {%- if product.template_suffix == 'pre-order' -%}
                    {{- 'product.form.pre_order' | t -}}
                  {%- else -%}
                    {{- 'product.form.add_to_cart' | t -}}
                  {%- endif -%}
                </button>
              {%- else -%}
                <button type="submit" class="product__add-to-cart button button--secondary" disabled="disabled">{{ 'product.form.sold_out' | t }}</button>
              {%- endif -%}
            </form>

            {%- if product.description != blank -%}
              <div class="product__description rte">
                {{ product.description }}
              </div>
            {%- endif -%}

            {%- if section.settings.show_share_buttons -%}
              {%- include 'share-buttons' -%}
            {%- endif -%}

            {%- include 'product-tabs' -%}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var initProduct = function(productElement) {
      productElement.trademarkProduct({
        product: {{ product | json }},
        enableHistoryState: true,
        ajaxCart: (productElement.attr('data-ajax-cart') === 'true'),
        optionsWithValues: {{ product.options_with_values | json }},
        allowSelectingSoldOutVariants: (productElement.attr('data-allow-selecting-sold-out-variants') === 'true')
      });
    };

    initProduct($('#product-{{ product.id }}'));

    $(document).on('shopify:section:unload', '#shopify-section-product-template', function(event) {
      $(event.target).find('#product-{{ product.id }}').data('plugin_trademarkProduct').destroy();
    });

    $(document).on('shopify:section:load', '#shopify-section-product-template', function(event) {
      initProduct($(event.target).find('#product-{{ product.id }}'));
    });
  });
</script>

<style>
  {%- if section.settings.enable_image_zoom -%}
    .product__slide:not(.product__slide--video) {
      cursor: zoom-in;
    }
  {%- endif -%}
</style>

{% schema %}
{
  "name": "Product page",
  "settings": [
    {
      "type": "checkbox",
      "id": "allow_selecting_sold_out_variants",
      "label": "Allow selection of sold out variants",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "hide_variants_if_only_one",
      "label": "Hide selectors if there is only one variant",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_color_swatch",
      "label": "Show color swatch",
      "info": "Colors appear white? [Learn more here](http://support.maestrooo.com/article/80-product-uploading-custom-color-for-color-swatch).",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_size_swatch",
      "label": "Show size swatch",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_quantity_selector",
      "label": "Show quantity selector",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_share_buttons",
      "label": "Show share buttons",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_image_zoom",
      "label": "Enable image zoom",
      "info": "This only works on large screens.",
      "default": false
    },
    {
      "type": "header",
      "content": "Tabs"
    },
    {
      "type": "paragraph",
      "content": "[Learn more about product tabs.](http://support.maestrooo.com/article/82-product-adding-global-tabs-to-product-pages)"
    },
    {
      "type": "page",
      "id": "tab_page_1_handle",
      "label": "First page"
    },
    {
      "type": "page",
      "id": "tab_page_2_handle",
      "label": "Second page"
    },
    {
      "type": "paragraph",
      "content": "Trademark also allows you to add specific tabs for a given product only. [Learn more about this feature](http://support.maestrooo.com/article/83-product-adding-different-tabs-per-product)."
    },
    {
      "type": "header",
      "content": "Reviews"
    },
    {
      "type": "paragraph",
      "content": "You need to install [Shopify's free Product Reviews](https://apps.shopify.com/product-reviews) app before enabling this option."
    },
    {
      "type": "checkbox",
      "id": "reviews_enabled",
      "label": "Enable",
      "default": false
    }
  ]
}
{% endschema %}

My ideal solution would be to hide images whose alt description doesn't contain the name of the selected variant (in this case, colours).

Any feedback would be much appreciated. Thanks.

0 Likes
New Member
1 0 0

Replying to follow this thread, as I too need to implement this functionality

0 Likes
Shopify Partner
21 0 3
Any news on that?

Everybody who has several variants per product and several photos per variant need this. It is such a basic need.

Please Shopify help with that...
1 Like
New Member
1 0 0
I am using this app:
Variant Image Automator by StarApps Studio
0 Likes