Variant Images

Our theme has basic support for displaying different images for different variants. You just have to do some tweaks in order to make this work.

1. Product tweaks

This feature works with alt tags and one variant. This means that you can have one variant with multiple options that will control what images are shown. You can have up to three variants in the product (as Shopify supports), but only one will control the images.

You'll have to make sure that each image has it's alt tag set to the option title that controls it. Let's say you have a Color variant for your product, and then two options: black and white. Make sure that your images have these alt tags only black and white.

2. Code tweaks

  1. Go to the theme editor (read this article for more info)
  2. Choose to edit /layout/theme.liquid. Right at the end, you'll see these two tags:

    </body>
    </html>
    	

    Before these, add the following snippet:

    <script type="text/javascript">
    
        var gallery = {};
    
        $('.box__product-gallery').find('img').each(function(){
          if ( typeof gallery[$(this).attr('alt')] == 'object' ) {
            gallery[$(this).attr('alt')].push($(this).parent());
          } else {
            gallery[$(this).attr('alt')] = [$(this).parent()];
          }
        });
    
        window.CUBER.Product._initProductVariantChange = function(firstTime, productSingleObject, $product) { 
          
          var variant = null,
            options = window.CUBER.Product._getProductVariant( $product );
    
          productSingleObject.variants.forEach(function(el){
    
            if ( $(el)[0].options.equals(options) ) {
              variant = $(el)[0];
            }
    
          });
    
          if ( gallery[variant.option1] ) {
            $('.box__product-gallery').find('.box--product-image').css('display', 'none').addClass('remove-from-flick');
            gallery[variant.option1].forEach(function(elm){
              $(elm).css('display', 'block').removeClass('remove-from-flick');
            });
            if ( $('.box__product-gallery').children('.site-box-content').hasClass('flickity-enabled') ) {
              $('.box__product-gallery').children('.site-box-content').flickity('reloadCells');
            }
          }
    
          window.CUBER.Product._productSelectCallback(variant, $product, productSingleObject);
          if ( ! firstTime && $product.find('#productSelect option').length > 1 && ! $('body').hasClass('template-index') ) {
            window.CUBER.Product._updateProductVariantState(variant);
          }
    
        }
    
      </script>
    	
  3. If the variant which is tied to the images isn't the first one, change option1 (2 places), into the option2 or option3.
  4. Because the image numbering will be broken now, you'll have to hide these. Go to assets/css_main.scss.liquid and right at the end of the file, paste the following snippet:

    .gallery-index, .flickity-page-dots {
        display: none;
    }
    .product-zoom {
        left: calc(50% - 60px);
    }
    	
  5. Save all files!
This customization will break the image zooming functionality, so make sure that you disable image zoom from the product page settings.