On IKEA, instead of showing variants there, they add More options available under the product. Interesting approach, it makes visitors wonder what the other options are. I think that is both a good and a bad thing. Curiosity is good, but it creates some confusion.

Macy’s, alternatively, actually shows the variants under the product image. And you can get a preview of a limited amount of variants by clicking on them right there. I think IKEA could do the same, instead of only mentioning that there are variants.

 

Below are some insights by Baymard from their user testing on mobile. (source)

 

 

 

 

 

What about on desktop, if there are too many color variants for one row?

One possible solution is to have scrolling arrows (left and right) to scroll through the swatches.

 

On some sites, I’ve seen two other solutions implemented, which I believe have the same usability issues as mentioned in the Baymard article for mobile:

 

 

 

Should the image change on mouse hover on the color swatches?

I believe it’s easy to ‘mis-hover’ and end up on the other variant if the image changes on hover. Try it for yourself on Zalando (only some products have swatches, so you’ll have to look at a few to find one that has them) and you’ll probably experience some frustration. I think people are used to clicking on a variant to display it.