I have 2 questions if you will allow me.....
1) How can I add a color swatch for the variants available to a product on a category/collections page? (Just like the example in the image).
2) When opening up a product page, how can you map the variant names to the correct images? Eg: when selecting the 'green' option for a t-shirt, I want to see the image that represents that specific color.
Below are my suggestions for your questions regarding variant color swatches and variant image mapping.
1. Some third-party themes have this feature built into them. If you are interested in buying a third-party theme, I'd be happy to suggest a couple that has the feature. Alternatively, you could add some custom code into the theme by hiring a Shopify Expert to do this for you. Otherwise, there is a great app that you can install that will accomplish this, called Collection Swatch Pug.
2. We actually offer a free step-by-step guide that you can follow, here, to set this up in your store.
Let me know if you have any questions!