carolineschnapp/multiple images for a variant.md

## multiple images for a variant.md

      
    Raw
  

              multiple images for a variant.md
            
          
    What to do


Use the alt text to associate the additional images - besides the variant image - to the option value. Example: say you have 3 images that show the Blue variants, then a) associate the first image as variant image to all Blue variants, and b) set the alt text of the 2 additional images to 'Blue'.
Copy+paste the code found in the product.liquid snippet below at the bottom of your product.liquid template.

How that works, essentially

Only the images associated to the currently selected variant are shown. Other images are hidden.
What to expect, the specifics


On page load, only the images associated to the selected variant will be shown.
When a new variant is selected, only the images associated to that new variant will be shown.
The wrapper of the image, if one is used, is hidden, so there will be no left-over border shown on the page when an image is hidden.

Requirement

jQuery 1.7 or later.

  
## product.liquid
{% assign option_name = 'Color' %}

{% if product.options contains option_name %}

<script>

// Grabbing product thumbnails
// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Simple, Radiance, Minimal, Supply, New Standard and many more.
var thumbnails = jQuery('img[src*="/products/"]') /* All product images */
  .not('#related-products img')                   /* Except related products, thumbnails not clickable */
  .not('a[href^="/collections/"] img')            /* Except related products */
  .not('a[href^="/products/"] img')               /* Except mini-cart products */
  .not('header img')                              /* Except mini-cart products, thumbnails not clickable */
  .not('#drawer img')                             /* Except mini-cart products, thumbnails not clickable, in Simple theme. */
  .not(':first');                                 /* Except first one, i.e the main image */

var optionSelect;

{% assign option_index = 0 %}
{% for option in product.options %}
  {% if option == option_name %}
    {% assign option_index = forloop.index0 %}
  {% endif %}
{% endfor %}

{% if product.options.size == 1 %}
  optionSelect = '.single-option-selector';
{% else %}
  optionSelect = 'label:contains({{ option_name }}) + .single-option-selector';
{% endif %}

jQuery('form[action="/cart/add"]').on('change', optionSelect, function() {
  var optionValue = $(this).val();
  thumbnails.each(function() {
    var wrapper = $(this);
    while ( wrapper.parent().children().length === 1 ) {
      wrapper = wrapper.parent();
    }
    if ( jQuery(this).attr('alt') === optionValue ) {
      wrapper.show();
    }
    else {
      wrapper.hide();
    }
  });
});
</script>

{% endif %}
	{% assign option_name = 'Color' %}

	{% if product.options contains option_name %}

	<script>

	// Grabbing product thumbnails
	// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Simple, Radiance, Minimal, Supply, New Standard and many more.
	var thumbnails = jQuery('img[src="/products/"]') / All product images */
	.not('#related-products img') /* Except related products, thumbnails not clickable */
	.not('a[href^="/collections/"] img') /* Except related products */
	.not('a[href^="/products/"] img') /* Except mini-cart products */
	.not('header img') /* Except mini-cart products, thumbnails not clickable */
	.not('#drawer img') /* Except mini-cart products, thumbnails not clickable, in Simple theme. */
	.not(':first'); /* Except first one, i.e the main image */

	var optionSelect;

	{% assign option_index = 0 %}
	{% for option in product.options %}
	{% if option == option_name %}
	{% assign option_index = forloop.index0 %}
	{% endif %}
	{% endfor %}

	{% if product.options.size == 1 %}
	optionSelect = '.single-option-selector';
	{% else %}
	optionSelect = 'label:contains({{ option_name }}) + .single-option-selector';
	{% endif %}

	jQuery('form[action="/cart/add"]').on('change', optionSelect, function() {
	var optionValue = $(this).val();
	thumbnails.each(function() {
	var wrapper = $(this);
	while ( wrapper.parent().children().length === 1 ) {
	wrapper = wrapper.parent();
	}
	if ( jQuery(this).attr('alt') === optionValue ) {
	wrapper.show();
	}
	else {
	wrapper.hide();
	}
	});
	});
	</script>

	{% endif %}