When your visitors land on one of your product pages, the first thing they do is go through the images. They do this to determine whether the product could be a match. If the visitor sees something he likes among the images, he explores the rest of the product information. If not, he leaves the page to find another product or leave your site.
To go through the images, your visitor will often use the variant picker. You can see this by looking at the heatmap below. The "warm" areas are where visitors click the most. 29.5% of this page's clicks are on the variant selectors.
In the image, there's a size option below the color option. But imagine if I had placed the size option on top. That would force my visitors to scroll even more up and down the page to go through the variants.
Therefore, make sure to place your color options or any other option that changes the main image, on top. This reduces the friction of having to go up and down on the page to go through the different variants. The closer the color swatch is to the main image, the better.
Place the main image, thumbnails, and swatches in the same viewport