Images per variant with individual design in your shop

In Tiendanube it is possible to configure a product to contain more than one variant. That means the same shirt can come in different colors. Each of these colors can become a variant of the product. In addition, the product photo may update automatically as you scroll through the available variants.

This functionality is available both on the product page and in the “quick buy” option available in the product list and on the home page of stores.

In this article, we’ll explain how to add this functionality to a custom-themed store in two easy steps.

Step 1

Register a function in layout.tpl to be executed each time a change is detected in a variant using Javascript code like the following:

$(document).ready(function() {
  LS.registerOnChangeVariant(function(variant){
  	// this is used on quick shop modals
  	var current_image = $('img', '#quick'+variant.product_id);
  	current_image.attr('src', variant.image_url);
  	// this is used on single product view
  	$(".cloud-zoom-gallery[data-image="+variant.image+"] > img").click();
  });
})

step 2

Then in templates/product.tpl add the data image ID to associate it with the currently selected image.

<a class="cloud-zoom-gallery img-thumbnail" href="https://www.tiendanube.com/blog/como-incluir-la-funcionalidad-de-imagenes-por-variante-con-diseno-a-medida/{{ image" product_image_url('original') }}" rel="useZoom: 'zoom', smallImage: "https://www.tiendanube.com/blog/como-incluir-la-funcionalidad-de-imagenes-por-variante-con-diseno-a-medida/{{ image" product_image_url('large') }}' " data-image="{{image.id}}">
  {{ image | product_image_url('thumb') | img_tag(product.name) }}

That’s it! Yes now, configure by the administrator the images of your shop so that they are automatically changed.

Remember that you can register as a designer Business partners of Tiendanube and thus access a demo shop to test how to make these and many other changes. If you haven’t already, sign up now.