Currently when your on a product page Shopify has the first available variant selected. The problem I'm having is that means XS is the default size but I don't have certain Colors in that size. So when customers are selecting a color my featured thumbnail image isn't changing because it's unavailable, and unless you scroll down it just looks like my site isn't functioning.
What I don't want to do is re-order my variants to look like S,XS,M,L,XL to make Small the default because it will then look like an error on my part if the sizes aren't in order.
So basically I want to keep XS as the first variant but when you visit a product page Medium is selected.
It seems this is the culprit "product.first_available_variant". Was thinking a piece of code to check if Medium is available and makes that the default variant, if not then select first available variant.
These two articles will help you to solve your problem