You DMed me asking how but I’ll explain here. There exists already in the view and the template (product_views_option_color.tpl) the ability to show images instead of colours. This is currently used via the Color Palette settings in the config record to show an image of a swatch instead of using a hex (or even CSS!) to generate the desired color/swatch. So, this means that in order to make it item specific, we would need to either: 1. Change the template so that the

src

for the image to points to a value in the item model (which should be exposed to this template already) 2. Change the context object of the view, so that the

image.src

value is changed to point to desired image What’s interesting about this is that each should only involve changing either the JavaScript or the template, which means that it could be delivered either as an extension or as a modification to the theme. 1. Modifying the theme, should hopefully be more straightforward, but requires modifying the theme, which some people don’t like. 2. Modifying the JS takes more set up and work, but it could be delivered through an existing extension, and would also leave the template untouched (good for managed themes and SuiteCommerce) As a hacky example (as in not something I think you should do) you could modify ProductViews.Option.View so that the

values

function in

getContext

works differently. Specifically:

if (self.model.get('colors')) {
        image = {src: self.options.item.get('itemimages_detail').media[value.label] ? self.options.item.get('itemimages_detail').media[value.label].urls[0].url : ''};
        color = '';
        is_color_tile = false;
     
}

This example hardcodes the naming convention that I use on my demo site into the object path, but you should get the idea. Hope that helps