Is this possible?

New Member
2 0 0
I'm still working on my graphic novel site. Trying to make it as simple as possible. Is it possible to have a variation match a differrent picture than the default one. For example there are 7 different volumes of Sin City, so if someone wants to buy a sin city book, they can search by typing either sin city, vol 1, 2,3, 4 the author etc. It will then take them to the default sin city page in which I have all 7 books under vairiations (a drop down menu). But once they pick say vol. 3 to add to cart they get an image of the first volume (or whatever first image I uploaded to shopify first). If they see an image of vol 1 instead of vol 3 they might get confused, which probly will lead them to not purchasing the product. So if anything I just said makes any sense to those reading, can I have vol 3 variation somehow match the third image? I know the simple way would be to just make specific product detail page for each volume but I like the simplicity of variations and I think customers would too.
0 Likes
Shopify Staff
Shopify Staff
2002 0 41

You can emit an javascript array with all image locations and then use the onchange handler of the dropdown to update the images.

something like this (from top of my head and requiring prototype):


{% comment %} Only switch images if image count is equal to variants count {% endcomment %}
{% if product.images.count == product.variants.count %}
<script>
var images = [
{% for img in product.image %}
  "{{img | product_image: 'large' }}", 
{% endfor %}
]

Event.observe('id-of-select', 'change', function(event) {
  $('id-of-product-img').src = images[Event.target(event).selectedIndex];
});
{% endif %}

</script>
Tobias Lütke - Shopify CEO // http://twitter.com/tobi
0 Likes