Mobile view for product - add swatch option for multiple colors product

Site URL: https://www.ocpmask.com/custom-mask/satin

Hello everyone! I have an annoying problem that hopefully someone can help!

I need a CSS code or an instruction on how to edit my product in mobile view format.

My site: https://www.ocpmask.com/custom-mask/satin (mobile preview attached)

When in normal view, all my pictures are showing up as stacked and since i have different colors for the mask, people can quickly change in the drop down to see the matching color. When in mobile view, the customer can only see 1 picture at a time. I want to have the ability for the customer to see a small preview of all colors, then click on that one to be able to see the big picture. If they have to click on each color on the drop down to see just 1 color, that would take too long.

Any ideas or tips on how to much this view better for mobile users? 95% of my visitors are on mobile so i want to make it as users friendly as possible!

Thanks in advance for the help! 
 

You can see this plugin, hope it helpful. 

It will change dropdown to circle color

Thanks Tuan. I was hoping for something at no cost from the Squarespace team. That plugin from third party seems outrageous for what it does! I'll keep searching for a better option.