Using the same styles of the product page to your shop page is pretty simple with the Smart Swatches Pro plugin. Follow the steps below:
1) From your WordPress dashboard navigate to Smart Swatches > Shop Page.
2) Under the Shop Page settings tab you will find the option Use Product Page Styles to Shop Page.
3) Check the option and you are done. Your variation swatch styles of the product page will be applied to the shop page as well.
The frontend will look something like below:
Single Product Page:
Shop Page: