Product Details Page

Site URL: https://www.katieguyerdesign.com/

Hello!

I am reaching out because I recently saw a website that I was inspired by the way that they displayed their products and I am curious if anyone knows how to do this. 

Website: https://www.jivanas.com/

My Site:  https://www.katieguyerdesign.com/

I am helping a client with a wallpaper website.  She has two main product lines that included variants for colors and style for each.  On the site so far I have created a page for each of the lines and then within that page created a product for each style and then within the product I created variants for the different colors each style comes in.  Right now I have a third page where they can "shop all" which allows them to filter by color and see all the variations that way.

What I am trying to do, which the Jivanas website above does, is on the "shop all" page show a product for each of the variations (Product Line + Color + Style) but when they click into it it will bring them to the Product and style but it will show them the other color variants (as it does when they go through the Product Line page).

So basically when a user clicks, for example, "Vernon Star I Blush" on the "Shop All" page I want it to bring them to the same product page for when they  choose "Vernon Star I"  from the "Vernon Star" page. 

Ideally, if they come through the "shop all" page and choose the  "Vernon Star I Blush" the blush color swatch and thumbnail page would be displayed first and then they could choose other color variants.  

I hope this description makes sense but please let me know if you need more information to better understand.  Thanks so much!