title: Shopify Product Page to hide variant images
body: <p>I am sort of new with Shopify and I´ve been playing around with it for the ast week or so without much success when trying to solve my issue.</p>
  
  <p>I am currently using the Brooklyn template and the way they represent the Product Page doesn´t precisely give the best user experience. The way it´s representing the images by default is by having all the product variants images showed to the customer all the time even if he hasn´t actually picket that variant (i.e. a specific colour for the product). It also displays all the product images in a vertical way which makes navigation for the user quite frustrating if you have more than a couple of pictures per product variant.</p>
  
  <p>I´ve found online a tutorial ( <a href="http://littlesnippets.ca/blogs/tutorials/15665261-grouping-images-with-variants" rel="nofollow">http://littlesnippets.ca/blogs/tutorials/15665261-grouping-images-with-variants</a> )that addresses the part of my issue to hide the pictures of the variants that are not selected by the customer, and show them once the user click on it.(you can see an example of what I want here <a href="http://group-variant-images.myshopify.com/collections/frontpage/products/anson-chair" rel="nofollow">http://group-variant-images.myshopify.com/collections/frontpage/products/anson-chair</a> ). This is more or less how it looks my site now (<a href="https://themes.shopify.com/themes/brooklyn/styles/brooklyn/preview" rel="nofollow">https://themes.shopify.com/themes/brooklyn/styles/brooklyn/preview</a>).</p>
  
  <p>The problem is that that tutorial is being applied to a website that is not using the exact theme/functionality that Ii do, although it´s similar.
  I´ve failed to apply those changes to my theme, can anybody give me a hand?</p>
  
  <p>This is my product.liquid piece of code at the moment:</p>
  
  <pre><code>&lt;!-- /templates/product.liquid --&gt;
  
  &lt;div itemscope itemtype="http://schema.org/Product"&gt;
  
  &lt;meta itemprop="url" content="{{ shop.url }}{{ product.url }}"&gt;
  &lt;meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}"&gt;
  
  {% assign current_variant = product.selected_or_first_available_variant %}
  
  &lt;div class="grid product-single"&gt;
  &lt;div class="grid__item large--seven-twelfths medium--seven-twelfths text-center"&gt;
    &lt;div class="product-single__photos"&gt;
      {% assign featured_image = current_variant.featured_image | default: product.featured_image %}
  
      {% comment %}
        Display current variant image, or default first
      {% endcomment %}
      &lt;div class="product-single__photo-wrapper"&gt;
        &lt;img class="product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}"&gt;
      &lt;/div&gt;
  
      {% comment %}
        Display rest of product images, not repeating the featured one
      {% endcomment %}
      {% for image in product.images %}
        {% unless image contains featured_image %}
          &lt;div class="product-single__photo-wrapper"&gt;
            &lt;img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}"&gt;
          &lt;/div&gt;
        {% endunless %}
      {% endfor %}
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths"&gt;
    &lt;div class="product-single__meta"&gt;
      {% if settings.product_vendor_enable %}
        &lt;h2 class="product-single__vendor" itemprop="brand"&gt;{{ product.vendor }}&lt;/h2&gt;
      {% endif %}
  
      &lt;h1 class="product-single__title" itemprop="name"&gt;{{ product.title }}&lt;/h1&gt;
  
      &lt;div itemprop="offers" itemscope itemtype="http://schema.org/Offer"&gt;
        {% comment %}
          Optionally show the 'compare at' or original price of the product.
        {% endcomment %}
  
        {% if product.compare_at_price_max &gt; product.price %}
          &lt;span class="product-single__price--wrapper"&gt;
            &lt;span class="visually-hidden"&gt;{{ 'products.general.regular_price' | t }}&lt;/span&gt;
            &lt;span id="ComparePrice" class="product-single__price--compare-at"&gt;
              {% if current_variant.compare_at_price &gt; current_variant.price %}
                {{ current_variant.compare_at_price | money }}
              {% endif %}
            &lt;/span&gt;
            &lt;span class="visually-hidden"&gt;{{ 'products.general.sale_price' | t }}&lt;/span&gt;
          &lt;/span&gt;
        {% endif %}
  
        &lt;span id="ProductPrice" class="product-single__price{% if product.compare_at_price &gt; product.price %} on-sale{% endif %}" itemprop="price"&gt;
          {{ current_variant.price | money }}
        &lt;/span&gt;
  
        &lt;hr class="hr--small"&gt;
  
        &lt;meta itemprop="priceCurrency" content="{{ shop.currency }}"&gt;
        &lt;link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}"&gt;
  
        &lt;form action="/cart/add" method="post" enctype="multipart/form-data" class="product-single__form" id="AddToCartForm"&gt;
          &lt;select name="id" id="ProductSelect" class="product-single__variants"&gt;
            {% for variant in product.variants %}
              {% if variant.available %}
                &lt;option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}"&gt;{{ variant.title }} - {{ variant.price | money_with_currency }}&lt;/option&gt;
              {% else %}
                &lt;option disabled="disabled"&gt;
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                &lt;/option&gt;
              {% endif %}
            {% endfor %}
          &lt;/select&gt;
  
          {% comment %}
          &lt;div class="product-single__quantity"&gt;
            &lt;label for="Quantity" class="product-single__quantity-label js-quantity-selector"&gt;{{ 'products.product.quantity' | t }}&lt;/label&gt;
            &lt;input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector"&gt;
          &lt;/div&gt;
          {% endcomment %}
  
          &lt;div class="product-single__add-to-cart"&gt;
            &lt;button type="submit" name="add" id="AddToCart" class="btn"&gt;
              &lt;span id="AddToCartText"&gt;{{ 'products.product.add_to_cart' | t }}&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
  
      &lt;/div&gt;
  
      &lt;div class="product-single__description rte" itemprop="description"&gt;
        {{ product.description }}
      &lt;/div&gt;
  
      {% if settings.social_sharing_products %}
        {% include 'social-sharing' %}
      {% endif %}
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  {% if collection %}
  &lt;hr class="hr--clear"&gt;
  &lt;div class="text-center"&gt;
    &lt;a href="{{ collection.url }}" class="return-link"&gt;&amp;larr; {{ 'products.general.collection_return' | t: collection: collection.title }}&lt;/a&gt;
  &lt;/div&gt;
  {% endif %}
  
  &lt;/div&gt;
  
  {% comment %}
  
  *IMPORTANT:*
  This theme uses a customized version of `option_selection.js` to support    using radio inputs for color and size variants. The custom version is in `variant_selection.js`.
  
  If you wish to enable the default dropdowns for size and color
  you can change the liquid asset tag below from:
  
  {{ 'variant_selection.js' | asset_url | script_tag }}
  
  to
  
  {{ 'option_selection.js' | shopify_asset_url | script_tag }}
  
   If you use the default `option_selection.js` the labels for the dropdowns will  appear outside the dropdown.
  
  You will also need to change `.radio-wrapper` to `.selector-wrapper` below.
  
  {% endcomment %}
  {{ 'variant_selection.js' | asset_url | script_tag }}
  &lt;script&gt;
  var selectCallback = function(variant, selector) {
  timber.productPage({
    money_format: "{{ shop.money_format }}",
    variant: variant,
    selector: selector,
    translations: {
      addToCart : {{ 'products.product.add_to_cart' | t | json }},
      soldOut : {{ 'products.product.sold_out' | t | json }},
      unavailable : {{ 'products.product.unavailable' | t | json }}
    }
  });
  };
  
  jQuery(function($) {
  new Shopify.OptionSelectors('ProductSelect', {
    product: {{ product | json }},
    onVariantSelected: selectCallback,
    enableHistoryState: true
  });
  
  // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
  {% if product.options.size == 1 and product.options.first != 'Title' %}
    $('.radio-wrapper:eq(0)').prepend('&lt;label for="ProductSelect-option-0"    class="single-option-radio__label"&gt;{{ product.options.first | escape }} &lt;/label&gt;');
  {% endif %}
  
  // Hide drop-down selectors if we only have 1 variant and its title contains 'Default'.
  {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
    $('.selector-wrapper').hide();
  {% endif %}
   });
  &lt;/script&gt;
  </code></pre>