Streaming live at 10am (PST)

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)