Variant images

[cshold]

Introducing variant images in Timber.

Demo

• Size 26 has no variant image and is sold out, to test the variations

Cart

• Use item rather than item.product

shop.js

• Added timber.switchImage to be used when a thumbnail image is clicked and the variant is switched (product.liquid line 195)

product.liquid

• featured_image line 26
• variant line 60
• Remove check if an image exists (just caused duplicate code)
• Hide quantity selector if product is sold out or unavailable

cc/ @christopherlobay @maartenvg @celsodantas @carolineschnapp

[christopherlobay]

This looks good, but I'm not sure if it's a great example to link to for partners, considering a bunch of functionality is in the shop.js.liquid file which is a very Timber specific thing.

[carolineschnapp]

@christopherlobay are you referring to timber.switchImage?

When we, design gurus, reviewed themes for variant images, we noticed that the best designers (Clean Themes, Out of the Sandbox, Pixel Union) all moved the image swapping to their theme JavaScript file. Timber is not doing anything Timber-like here, it's just a real-world theme, that a) applies the DRY principle, and b) puts as much JavaScript it can in its theme's JS file (separation of CSS / JS / HTML). Thumbnails when clicked update the main image, a very common pattern, and that requires the same JS treatment as the variant image swap. Actually a lot of good designers who deal with Shopify even move their selectCallback function to their JavaScript file.

I agree this needs to remain simple, but I think what Timber is doing is simple enough and clear enough.

[cshold]

How about we use Timber as the 'real world' example, and the docs page would have the super basic inline JS on the product template?

[cshold]

Thumbs up to merge this morning?

[christopherlobay]

Looks good to me!