Images for product attributes

I have articles with several Product variants where all predefined values look different.

I would like to attach an image to each predefined vaulue on a Product attribute.
When the customer selects a value for product attribute than a small Image should display next to the combobox displaying what that alternative looks like.

Then the customer selects a value for Product attribute 2 and then Another image should display next to that combo box.

Take an example: The Product is a doll with the following Product attributes:

Hair color: Black, Blonde, Redhead, brunette
Eye color: Black, Blue, Brown, Green
Skin tone: Fair, Medium, Tanned, Brown
Hair style: A, B, C, D

This gives me 256 Product variants. I dont want to make all 256 variants and take a Picture of each of them and upload 256 Pictures for that Product.


I want one (or more) Picture attached to the Product as to day.

I want one Picture of each hair color.
I want one Picture of each Eye color.
I want one Picture of each skin color.
I want one Picture of each hair style.

When I have selected values for the 4 comboboxes the Product page should display one and four smaller images one for each Product attribute (Red Hair, Blue Eyes, Fair skin, Hairstyle B).

This will allow me to offer more custom built Products and they can get a one of a kind Product that is excactly the way they like it.

As is to day I can fix it so that the customer can make the selections but he cant see what they have selected. With a Picture it is easier to spot if you have selected the wrong variant for an attribute Before making an order.

Have you considered using the image square product attribute type that was introduced in v3.80 to illustrate the different options instead? There's not currently any examples on the nop demo site but the work exactly the same way as the color squares but allow you to use and image to illustrate the option instead of a color swatch.

No, I haven't consdered it. I cant find any documentation on how to do it.

I figured it out. It seems to work.

Two things I'd like though:

Can I change the size of the image Squares?

Can I display the selected attribute text beside the image Squares?

You can associate attribute values to a product image which will display with the rest of the product images

jorbjo wrote:
There's a setting called mediasettings.imagesquarepicturesize which is available from the All settings page that sets the size (not sure why it's not available on the Media settings page).

Though I think it would require some changes to the CSS too as it's displayed as a background image so you'd need to increase the dimensions of the color squares. I'm pretty sure the image squares have been given their own class names in the upcoming 3.90 release instead of reusing the color square class names so that might be something to watch out for.

jorbjo wrote:
Yeah, the attributeName property is available on the ProductAttributeModel so you'd just need to edit the _ProductAttributes partial view to display it next to the thumbnail and maybe tweak the CSS to get it to display how you want.