variant images and their thumbnails

Shopify Partner
8 0 0

Now on the link http://shoevillage.myshopify.com/products/wl696?variant=18820172038 if you go
product image will change with selected variant Color(HG, Blue)
and using Alt text , i have associated four images to each of these colors
and then i hide all other product thumbnail images, so that the images associated with selected color shows only

now when i first open it, it comes with color HG and with its other 4 thumbnail image and with one main Image out of those 4
but then if i chose color blue, main product image changes but its 4 thumbnail images doesn't change

but if I i refresh page, it shows thumbnail of blue colors
so please help me with these
i am doing it with  Testament theme

 

Product.liquid

 

<div id="product-{{ product.id }}">

  <!-- For Mobile -->
  <div id="mobile-product" class="desktop-12 tablet-6 mobile-3">
    <div class="flexslider">
      <ul class="slides">    
        {% for image in product.images %}
        <li><img src="{{ image.src | product_img_url: '1024x1024' }}" alt="{{ image.alt | escape }}"></li>
        {% endfor %}      
      </ul>
    </div>  
  </div>   

  <!-- For Desktop -->

  <div id="product-photos" class="desktop-7 tablet-3 mobile-3">


    {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

    <div class="bigimage">
      <img id="{{ product.id }}" src="{{ featured_image | img_url: 'grande' }}" data-image-id="{{ image.id }}" data-zoom-image="{{ featured_image | img_url: 'master' }}" alt='{{ image.alt }}' title="{{ product.title }}"/>
    </div>
    <div id="{{ product.id }}-gallery" class="thumb-area">    
      {% assign featured_alt = product.selected_or_first_available_variant.option2 %}
      {% for image in product.images %}
      {% if image.alt == featured_alt or image == featured_image %}
      <a href="#" data-image="{{ image | product_img_url: 'grande' }}" data-image-id="{{ image.id }}" data-zoom-image="{{ image | product_img_url: 'master' }}">
        <img class="thumbnail" src="{{ image | product_img_url: 'small' }}" data-image-id="{{ image.id }}" alt="{{ image.alt }}" data-image-id="{{ image.id }}" />
      </a>
      {% endif %}
      {% endfor %}
       
      
    </div>
   
  </div>

 

  <script type="text/javascript">
    $(document).ready(function () {
     //initiate the plugin and pass the id of the div containing gallery images
       var thumareaSize = $('.bigimage > img').width();
      $('.thumb-area').css('width',thumareaSize +'px');
      $("#{{ product.id }}").elevateZoom({
        gallery:'{{ product.id }}-gallery',
        cursor: 'pointer',
        galleryActiveClass: 'active',
        borderColour: '#eee',
        borderSize: '1'
        });

      //pass the images to Fancybox
      $("#{{ product.id }}").bind("click", function(e) {  
        var ez =   $('#{{ product.id }}').data('elevateZoom');    
        $.fancybox(ez.getGalleryList());
      return false;
    });    
    
    var curProducturl = window.location.href;
    var curProductimage = $('.bigimage img').attr('data-zoom-image');
    var facebookHref = '//www.facebook.com/sharer.php?u='+curProducturl;
    var twitterHref = '//twitter.com/home?status='+curProducturl+'%20via%20@Twitter%20Handle';
    var pinterestrHref = '//pinterest.com/pin/create/button/?url='+curProducturl+'&amp;media='+curProductimage;
    $('#lower-description a.facebook').attr('href',facebookHref);
    $('#lower-description a.twitter').attr('href',twitterHref);
    $('#lower-description a.pinterest').attr('href',pinterestrHref);
    });
    $(window).load(function() {
     var thumareaSize = $('.bigimage > img').width();
      $('.thumb-area').css('width',thumareaSize +'px');
  });
  </script>

 

  <div id="product-right" class="desktop-5 tablet-3 mobile-3">
    <div id="product-description">
      {% if settings.vendor %}<h3>{{ product.vendor }}</h3>{% endif %}
      <h1>{{ product.title | escape }}</h1>
      {% if settings.subtitle %}<p>{{ page_title }}</p>{% endif %}      
      <p id="product-price">
        {% if product.available %}
        {% if product.compare_at_price > product.price %}
        <span class="product-price" itemprop="price">{{ product.price | money }}</span>&nbsp;<span class="was">{{ product.compare_at_price | money }}</span>
        {% else %}
        <span class="product-price" itemprop="price">{{ product.price | money }}</span>
        {% endif %}
        {% else %}
        <span class="product-price" itemprop="price">{{ 'products.product.sold_out' | t }}</span>
        {% endif %}
      </p>
      {% include 'short-form' %}
      

    </div>
   
    {% if template == 'product' %}
    {% if settings.popups %}
    <ul id="popups">
      <li class="first"><a href="#pop-one" class="fancybox">{{ 'products.product.popup_one' | t }}</a></li>
      {% if settings.popup-2 %}<li><a href="#pop-two" class="fancybox">{{ 'products.product.popup_two' | t }}</a></li>{% endif %}
      {% if settings.popup-3 %}<li><a href="#pop-three" class="fancybox">{{ 'products.product.popup_three' | t }}</a></li>{% endif %}
      {% if settings.popup-4 %}<li class="last"><a href="#pop-four" class="fancybox">{{ 'products.product.popup_question' | t }}</a></li>{% endif %}
    </ul>
    <div id="pop-one" style="display: none">{{ pages[settings.popup-one].content }}</div>
    <div id="pop-two" style="display: none">{{ pages[settings.popup-two].content }}</div>
    <div id="pop-three" style="display: none">{{ pages[settings.popup-three].content }}</div>
    <div id="pop-four" style="display: none">{% include 'question' %}</div>
    {% endif %}
    {% endif %}  

  </div>

 

 <!--<div class="clear"></div>
  <div id="social-icons-product" class="desktop-8 desktop-push-2 tablet-6 mobile-3">
      <div class="desc">
        {% include 'social' with product %}
      </div>
  </div>-->
     
  <div class="clear"></div>

        <div id="lower-description">
          <div class="section-title lines"><h2>{{ 'products.product.details' | t }}</h2></div>
          <div class="rte">{{ product.description }}</div>
        </div>
    <div class="clear"></div>

  {% if collection %}
  <div id="product-navigation" class="desktop-12 tablet-6 mobile-3">
    <span class="backto">
      {{ 'products.product.back_to' | t }} {{ collection.title | link_to: collection.url }}
    </span>

 

    <div id="back-forth">
      {% if collection.previous_product %}
      {% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %}
      <span class="prev-prod desktop-6 tablet-6">
        {{ 'products.product.previous_product_html' | t | link_to: prev_url }}
        <!--<img id="previous-product-image" />-->
        {% endif %}
      </span>
      {% if collection.next_product %}
      {% capture next_url %}{{ collection.next_product}}#content{% endcapture %}
      <span class="next-prod desktop-6 tablet-6">
        <!--<img id="next-product-image" />-->
        {{ 'products.product.next_product_html' | t | link_to: next_url }}
      </span>
      {% endif %}
    </div>
  </div>

  <script>
    jQuery.getJSON('{{ collection.next_product | append: '.js' }}', function(product) {
                   jQuery('#next-product-image').attr('src', product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_small$1'));
    });
    jQuery.getJSON('{{ collection.previous_product | append: '.js' }}', function(product) {
                   jQuery('#previous-product-image').attr('src', product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_small$1'));
    });
  </script>   

  {% endif %}  


  <div class="clear"></div>

  {% if collection %}
  {% include 'related-products' %}
  {% endif %}


</div>

{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.color > 1 %}
<script>
(function($) {
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    optionValue;
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
       }
    {% endfor %}
    $(function() {
      thumbnails = $('img[src*="/products/"]').not(':first');
      if (thumbnails.color()) {
        thumbnails.bind('click', function() {
          var image = $(this).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
          if (typeof variantImages[image] !== 'undefined') {
            {% for option in product.options %}
            optionValue = variantImages[image]['option-{{ forloop.index0 }}'];
            if (optionValue !== null && $('.single-option-selector:eq({{ forloop.index0 }}) option').filter(function() { return $(this).text() === optionValue }).length) {
              $('.single-option-selector:eq({{ forloop.index0 }})').val(optionValue).trigger('change');
            }
            {% endfor %}
          }
        });
      }
    });
})(jQuery);
</script>
{% endif %}

 

 

0 Likes
Shopify Expert
9807 92 1561

Hey Scott,

The link you've added is going to a locked storefront so that will limit what help can be given. You might want to consider posting the storefront password (not the admin password!) so the members can see the issue in action.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Partner
8 0 0

Hi Jason, Thanks for response.

Password is pheaxi.

0 Likes
Shopify Partner
8 0 0

Jason your help is awaited, if anything is required, let me know.

0 Likes
Shopify Expert
9807 92 1561

There doesn't seem to be any errors on the page, so I'm assuming your code is working as intended. The reason why only the images with matching alt tags show is down to this section of code:

{% if image.alt == featured_alt or image == featured_image %}
...
{% endif %}

This will only add images to the page with matching alt tags. If you choose another variant their images won't exist on the page so can't be shown (since you skipped them with that code above).

You would need to alter your code so it either:

  • loads new images with JavaScript as each new variant is picked, or
  • adds all images to the page and uses JavaScript to show / hide them as needed.

There could be a fair bit of code required for that so you might not get a complete solution here. See how much you can DIY and when you get stuck, post again. If you don't have any sort of coding skills you might want to work with a web dev. Try https://experts.shopify.com/ if you're looking for outside help.

Don't forget that smaller screens still show all images so you might also need to add similar code for that section.

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Partner
8 0 0

i have done the coding for variant color only as alt tag added have similar color, so when we first open it, it works well.......showing thumbnails which are supposed to be there, but when change color to blu, everything seems to be messed up......

but even this messed up one, if I refresh page becomes good and works as intnded but again if i choose new color same issue.

 

0 Likes
Shopify Partner
8 0 0

i have done the coding for variant color only as alt tag added have similar color, so when we first open it, it works well.......showing thumbnails which are supposed to be there, but when change color to blu, everything seems to be messed up......

but even this messed up one, if I refresh page becomes good and works as intnded but again if i choose new color same issue

I believe some callback function or switchimage function can make it correct?

Any suggesstions on this?

0 Likes
Tourist
2 0 0

Hi Scott! 

The code you require is here: 

https://gist.github.com/carolineschnapp/d3c1af82b915e9cae82929e6486f22fe

 

Great code from Caroline, however there is little problem with it, whereby when you use jQuery to "hide()" the old thumbnails the blank white space where the images are remains.

I have done some research and found that using .detach() rather than hide() fixes this, but then re append() ing doesn't work.

 

I'm hoping Caroline stops by here and gives her opinion.

Thanks.

Apologies for the 'multiple' threads - seems Shopify have a major flaw in their forums with overzealous spam and banning accounts. I'm told they are working on it!
0 Likes
New Member
2 0 0

Hi Jason

I am using the Retina theme and this solution using alt tags doesnt work for me as the thumbnails do not get filtered. Any help would be apprecited.

 My website url is https://www.hashtagstore.in/products/petrolhead-mens-t-shirt?variant=21422195523

and the storfront password is eaflau1.

My product liquid is a below.

<div class="sixteen columns">
  <div class="clearfix breadcrumb">
    <div class="right mobile_hidden">
      {% if collection.previous_product %}
        {% capture prev_url %}{{ collection.previous_product }}{% endcapture %}
        {{ 'products.general.previous_product_html' | t | link_to: prev_url }}
        {% if collection.next_product %}&nbsp; | &nbsp;{% endif %}
      {% endif %}

      {% if collection.next_product %}
        {% capture next_url %}{{ collection.next_product }}{% endcapture %}
        {{ 'products.general.next_product_html' | t | link_to: next_url }}
      {% endif %}
    </div>

   
    {% if settings.product_breadcrumb %}
      <div class="breadcrumb_text" itemscope itemtype="http://schema.org/BreadcrumbList">
        <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="item"><span itemprop="name">{{ 'general.breadcrumbs.home' | t }}</span></a></span> 
        &nbsp; / &nbsp;
        <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
          {% if collection %}
            <a href="{{ collection.url }}" title="{{ collection.title | escape }}" itemprop="item"><span itemprop="name">{{ collection.title }}</span></a>
          {% else %}
            <a href="/collections/all" title="{{ collections.all.title }}" itemprop="item"><span itemprop="name">{{ collections.all.title }}</span></a>     
          {% endif %}
        </span>
        &nbsp; / &nbsp;
        {{ product.title }}
      </div>
    {% endif %}
  </div>
</div>

{% if settings.product_sidebar %}
  {% include 'sidebar' %}
  <div class="twelve columns">
    <div class="product-{{ product.id }}">
{% else %}
  <div class="sixteen columns">
    <div class="product-{{ product.id }}">
{% endif %}

    <div class="section product_section clearfix" itemscope itemtype="http://schema.org/Product">
      
       {% if settings.product_images_position == 'left' %}             
       <div class="{% if settings.product_sidebar %}seven{% else %}nine{% endif %} columns {% if product-images == blank %}{% if settings.product_images_position == 'left' %}alpha{% else %}omega{% endif %}{% endif %}">
         {% include 'product-images' %}
        </div>
     {% endif %}

     <div class="{% if settings.product_sidebar %}five{% else %}seven{% endif %} columns {%if settings.product_images_position == 'left' %}omega{% else %}alpha{% endif %}">
       
      {% assign collection_handles = product.collections | map: 'handle' %}
      {% assign variant = product.selected_or_first_available_variant %}
       <h1 class="product_name" itemprop="name">{{ product.title }}</h1>
       {% if settings.display_vendor %}
          <p class="vendor">
            <span itemprop="brand">{{ product.vendor | link_to_vendor }}</span>
          </p>
       {% endif %}

      {% if variant.sku != blank and settings.display_sku %}
        <p class="sku">
          <span itemprop="sku">{{ variant.sku }}</span>
        </p>
      {% endif %}

      {% unless collection_handles contains 'coming-soon' %}
        <p class="modal_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
          <meta itemprop="seller" content="{{ shop.name | escape }}" />
          <meta itemprop="availability" content="{% if product.available %}in_stock{% else %}out_of_stock{% endif %}" />
          <meta itemprop="itemCondition" content="New" />

          <span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
          <span itemprop="price" content="{{ variant.price | money_without_currency }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
            <span class="current_price {% if product.available == false %}hidden{% endif %}">              
              {% if variant.price > 0 %} 
                {{ variant.price | money }} 
              {% else %}
                {{ settings.free_price_text }}
              {% endif %}
            </span>
          </span>
          <span class="was_price">
          {% if variant.price < variant.compare_at_price and variant.available %}
            {{ variant.compare_at_price | money }}
          {% endif %}
          </span>
        </p>
        
        {% include 'product-notify-me' %}
      {% endunless %}

      {% if settings.product_description_position == "top" %}
        {% if product.description != blank %}
         <div class="description" itemprop="description">
           {{ product.description | split: '<!-- split -->' | first }}
         </div>
       {% endif %}
      {% endif %}

      {% unless collection_handles contains 'coming-soon' %}
        {% include 'product-form' with 'product' %}
      {% endunless %}  

      {% if settings.product_description_position == "bottom" %}
        {% if product.description != blank %}
         <div class="description" itemprop="description">
          {{ product.description | split: '<!-- split -->' | first }}
         </div>
        {% endif %}
      {% endif %}

      {% if settings.display_collections or settings.display_tags or settings.display_type %}
       <hr />
      {% endif %}
     
       <div class="meta">
         {% if settings.display_collections %}
           <p>
             <span class="label">{{ 'products.product.collections' | t }}:</span> 
             <span>
              {% for col in product.collections %}
                <a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %} 
              {% endfor %}
            </span>
          </p>
         {% endif %}
       
         {% if settings.display_tags %}
            <p>
              {% for tag in product.tags %}
                {% if forloop.first %}
                  <span class="label">{{ 'products.product.tags' | t }}:</span> 
                {% endif %}

                {% unless tag contains 'meta-related-collection-' %}
                  <span>
                    <a href="/collections/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>{% unless forloop.last %},{% endunless %}
                  </span>
                {% endunless %} 
              {% endfor %}
            </p>
         {% endif %}
       
        {% if settings.display_type %}
           <p>
             <span class="label">{{ 'products.product.product_types' | t }}:</span> 
             <span>{{ product.type | link_to_type }}</span>
           </p>
        {% endif %}
       </div>

      {% include "social-buttons" with "product" %}     
    </div>
    
    {% if settings.product_images_position == 'right' %}   
      <div class="{% if settings.product_sidebar %}six{% else %}eight{% endif %} columns {% if product-images == blank %}{% if settings.product_images_position == 'left' %}alpha{% else %}omega{% endif %}{% endif %}">          
        {% include 'product-images' %}
      </div>
    {% endif %}
  </div>

  {% if product.description contains "<!-- split -->"  %}
    <br class="clear" />
    <div class="section clearfix">
      <div class="description">
        {{ product.description | split: '<!-- split -->' | last }}
      </div>
    </div>
  {% endif %}
  </div>

     <div class="yotpo yotpo-main-widget"
    data-product-id="{{ product.id }}"
    data-name="{{ product.title | escape }}"
    data-url="{{ shop.url }}{{ product.url }}"
    data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26'}}"
    data-description="{{ product.description | escape }}">
</div>
        
    
  {% if settings.display_related_products %}
    {% capture limit %}{{ settings.products_per_row | plus: 1 }}{% endcapture %}

    {% if collection and collection.all_products_count > 1 %}
      {% assign col = collection.handle %}
    {% else %}
      {% assign col = product.collections.last.handle %}
    {% endif %}

    {% for tag in product.tags %}
      {% if tag contains 'meta-related-collection-' %}
        {% assign related_collection_handle = tag | remove: 'meta-related-collection-' %}
        {% if collections[related_collection_handle].all_products_count > 0 %}
          {% assign col = related_collection_handle %}
          {% assign collection = collections[col] %}
          {% capture limit %}{{ collection.products_count | plus: 1 }}{% endcapture %}        
        {% endif %}
      {% endif %}
    {% endfor %}
      
    {% if col and collections[col].all_products_count > 0 %}
      {% if collections[col].all_products_count != 1 or collections[col].products.first.id != product.id %}
        <br class="clear" />
        <br class="clear" />
        <h4 class="title center">{{ 'products.product.related_items' | t }}</h4>

        {% assign skip_product = product %}
        {% assign products = collections[col].products %}
        {% assign products_per_row = settings.products_per_row %}
        {% include 'product-loop' with settings.product_sidebar %}
      {% endif %}
    {% endif %}

    
     
      

{% comment %}
Place this in your product.liquid template, at the bottom .
{% endcomment %}
{% if product.variants.color > 1 %}
<script>
(function($) {
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    optionValue;
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
       }
    {% endfor %}
    $(function() {
      thumbnails = $('img[src*="/products/"]').not(':first');
      if (thumbnails.color()) {
        thumbnails.bind('click', function() {
          var image = $(this).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
          if (typeof variantImages[image] !== 'undefined') {
            {% for option in product.options %}
            optionValue = variantImages[image]['option-{{ forloop.index0 }}'];
            if (optionValue !== null && $('.single-option-selector:eq({{ forloop.index0 }}) option').filter(function() { return $(this).text() === optionValue }).length) {
              $('.single-option-selector:eq({{ forloop.index0 }})').val(optionValue).trigger('change');
            }
            {% endfor %}
          }
        });
      }
    });
})(jQuery);
</script>
{% endif %}
    {% endif %}
</div>
     
      
   

0 Likes
Tourist
19 0 0

Hi jason! Great answer to this! Hi everyone!

 

I am having a similar problem as this but on collection page!

 

I am hoping if you know the answer for this as well.

 

I have been trying to let the product thumbnail image to correspond to what variant is selected on the collection page.

 

Right now, if I choose a variant, the thumbnail displayed in the collection page doesn't change from featured image. I am trying to change that.

 

You can see the example here. 

 

 

https://billiondollarbabystory.com/collections/shoes

 

Can you or someone who might know how to fix this please help me fix this?

0 Likes