The image gallery is the first thing your visitors goes through when landing on a product page. It's a filtering mechanism where they decide whether to continue researching the product. If they don't like what they see in the gallery, they find something else.
Your visitors often do this by swiping through the image gallery. But if you have a product in different colors, or other visually different options, they will often use your variant picker to go through this. User expect the image gallery to change when they click on a color-swatch.
It’s a pattern that you’ll see again and again in both user studies and using click heat maps. See the example below. 29.19% of all clicks on the product page are on the color swatches. It’s the area with most clicks of all the areas on the page.
Therefore, place your image, thumbnails, and variant picker (swatches) in the same viewport. If you don't, you force your visitors to scroll up and down a lot to go through your variants. This gets so annoying that your visitor will leave because they're annoyed. If you fit it all in the same viewport, I expect you to see an increase in product views, add to carts, and orders. The user will see more products because it’s not annoying to do so, and thus add more products to cart and buy more.
Here’s some implementation tips that helps you do that:
Also make sure that you Show color options on top.