Create a product-variant toggle that conditionally displays Shopify Buy Buttons

Hi all,

I’m using Webflow with Shopify Buy Buttons for full design flexibility + the ability to integrate with my fulfillment partner via Shopify.

My goal is to allow a customer to choose between 2 variants (for product size and associated price) and surface the appropriate Shopify Buy Button based on the selection.

A perfect example would be this product page, but with just 2 variants to choose from.

Functionality to mirror:

  • 2 product-variant panels that function like radio buttons – each displays a size and price.
  • Dynamic checkout button reflects the toggled product variant (this is where my Shopify buy buttons come in – a dynamic checkout button would display a different label and point to a different URL depending on selection)
  • A visual cue for the selected variant panel, ie. checkmark or filled circle
  • Added plus: text near the product title reflects the selected variant

I’ve got the design down for the rest of my product page, but I’m new to Webflow and definitely need some help figuring out how to implement dynamic components like this. (Note: my product page is just a page, not a product template, since I won’t be selling with Webflow. Curious whether I should be using some of Webflow’s ecommerce functionality even if selling with Shopify Buy Buttons.)

Many thanks in advance for your help :pray:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@jadoer I’m looking for the answer to this same question. Did you find out how to do this yet?

@strawpariI I never got an answer on this, but my guess is it requires JS. I’ll be working with a bit of development help soon, will try to share any updates here if we still do approach this design !

@jadoer got it! Appreciate the follow up and I’ll be on the lookout for any solutions I can find.

No worries, definitely let me know if you figure it out!

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:

  1. 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
  2. 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.
  3. Copy all that code from the Buy Button at Shopify, make sure there is the “Product ID” and “Variant ID”
  4. 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.
  5. 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.

https://preview.webflow.com/preview/fit-garten?utm_medium=preview_link&utm_source=designer&utm_content=fit-garten&preview=bb8d609e7b275fa2176f11a8ac5c01e6&pageId=5e99b9e5c27e084f17fc6566&itemId=5f867c1cf4f017279910bbf6&mode=preview

Hope this works for you! :slight_smile:

Thanks for the update! I tried to check out your read-only link but I’m seeing blank space where I think the selector would be. I ended up punting this project to a bit later but let me know if there’s a way I can view the end result of yours soon!

Hey there, I just ran into the same question!
I tried your read-only link but I can’t see how the product page displays the variants.

If I have a shirt that comes in multiple variants such as size and color, does this mean that I must create a CMS record for each size+color combination?