Swimwear product page - How to select a top and brief on one product page

[OT14]

Hello,

Looking for some help with product pages. We have our bikini sets split into a product page for the top, and a product page for the brief. I'd like to have a product page for bikini sets that allows customers to select their top size and brief size on the one product page. Example below;

Thank you

[Guleria]

Hello @OT14 ,

  Can you please share some URLs so we can understand it better ?

Regards
Guleria

[OT14]

Hi Guleria,

Here is an example of what we are trying to duplicate. You'll notice how on this product page you can select color, and then a top size and a brief size.

How can I achieve this in Shopify? 

https://lido-lido.com/swimwear/undici-high-waist

[Guleria]

In Shopify to do same:

1) Create separate product for each color with option top size and brief size.
2) Using metafields to make connection b/w them ( JSON will be better idea )  
3) Call the meatfield and display them as color swatch. And on click of the custom color swatch call the target color product without refresh of the page. 

[OT14]

Sorry I don't really understand what you mean. What I did try to do was create a draft product and set up the options like below, however that would then create 16 variants per color, which is wrong.

[Guleria]

No need to add colors as variant 
You requirement is like this https://y0659j3lwckjfn7f-56648433745.shopifypreview.com/products/dickies-original-874-twill-work-pan...

[OT14]

But I don't need them to select three options then add to cart. Because some people only want top. So I want them to be able to select color>top size>add to cart... then/or color>brief size>add to cart. So they can potentially add two seperate products to cart.

[Guleria]

Then that will be a static case.
Means Top size and brief size will be different products in different colors.
like:
Red top  ( this one only have variant top size )
Red brief ( this one only have variant brief size )

 And ten using metafield make a connection b/w them so they will display on the same product page.
And lastly customize the atc button so they both added to cart at same time like the reference. 

[OT14]

I appreciate your help, but I have no idea how metafields work. Surely there's a template out there that simply allows me to do what i'm asking lol

[Guleria]

Yes for meatields you can find how it works but to make them work as per your requirement you need to do logics.