We're running our store on Shopify, with the template "venture" which is a standard one.
Please see picture attached to understand what we need.
Everything has to be responsive, mobile friendly.
1. I want to replace the size & colour selection of our products by picture swatches.
> We can match pictures of the thumbnail with the name of the variant option
> When an option (I.e size S, red colour) is not available, the picture should be greyed out and crossed
> A black frame has to appear around the icon of the variant while hovering on top
> If the client chooses a size, then unavailable colors in this size should be automatically greyed out
> If the client chooses a color, then unavailable sizes in this color should be automatically greyed out
2. I want to display pictures related to the variant only. We can use a tag system if needed.
> The thumbnails will be displayed on the left of the main picture
> Only thumbnails of the selected associated picture will show
Shopify mentions three options :
You might not be keen on this, but it's the easiest to manage since there's a direct way to add / edit these alt tags within the admin interface and via the CSV upload. Don't be too quick to cast this one aside. If you're worried about the keyword(s) used to match the variant - don't be. You can use some simple string logic in the theme to remove that.
If you can be super consistent with image file names this can serve a similar purpose to the alt tags, but without the need to edit anything. This would just rely on you developing a naming convention, and adding code into the theme to work with that.
Probably something better left to an app but you could add metafields to a variant that specify what images are linked to it. This would let you avoid the alt tag method, and let you name the files whatever you like. Even more awesome this could let you specifiy images that might not even be attached to the product.