Hey man,
I just been working with something similar on what you need regarding showing different variants in different product pages with Shopify. About the toggle button I know there are some tutorials out there to make this happen and connect different pages, but what I find tricky and you’ll need for sure is this about separating product variants in different product pages.
Ok, hope this helps:
- Make sure to do everything in this tutorial (regarding the Shopify part) https://www.youtube.com/watch?v=3TAd5lVVnvQ&list=PLrgR1FgN3H-65OMgUuwKX3Ud2mrns_RcI&index=5
- What doesn’t comme there is how to put different variant in different product pages. If you just follow that tutorial you’ll get all variants in the same product page with a dropdown menu from shopify. What you have to do is create your buy button at Shopify but selecting only “one variant” not “all variants”. By doing that, when you generate the code you’ll see in there to important IDs, the “Product ID” and “Variant ID” you need both from each variant. Write them in a text document to use them later at Webflow.
- Copy all that code from the Buy Button at Shopify, make sure there is the “Product ID” and “Variant ID”
- At your CMS Collection where you added the “Product ID” field (like the tutorial) add another field for “Variant ID” ant there you will write the variant for your product. So you’ll have a CMS product for each variant.
- When you follow the steps of the tutorial where you replace code parts with your info (min 17:50) make sure to also connect the “Variant ID” so every product page will display that variant you created
I hope that this is what you are looking for and that I had been clear with all this (sorry Im not good at tutorials, lol) but make sure to check my reed only, check my CMS Collections at “Productos” and “Brownie Original” and “Brownie Nueces” where each one have their own IDs for Product and Variants, and check the code I used at the product page.
Hope this works for you! 