Conditional Visibility for Product Variation Selection

Dylan_Snowden · January 29, 2020, 4:16pm

Hello all.

In order to preserve full customization for my ecommerce store, I’ve been using Webflow in combination with the Shopify Buy Button, since I use Shopfiy for all of my wholesale orders that are synced to my 3PL provider. This has worked when I just had 1 product available since I would just have the Buy Button in the product template.

Now I have variations of this particular product so I need to swap out Shopify’s Buy Button that points to the Shopify variant each time Webflow’s variation has been selected.

I’ve been trying to use conditional visibility within the Product Template page but I am unable to access the variation SKU that’s updated with the Webflow variant is selected. I am able to access the variant SKU when pointing a Text Field to the product SKU. This text field is updated whenever I choose the Webflow variant. I want to be able to Hide / Unhide the variant’s associated Buy Button when the variant SKU is selected in Webflow. Just to be clear, the SKUS are the same on Webflow and Shopify.

Any one have any ideas on how I could achieve this?

Siton_Systems · January 29, 2020, 5:31pm

Sound like something you should solve by custom code.

You need this idea on your entire store? (Or for specific products).

https://stackoverflow.com/questions/2975521/show-hide-div-based-on-select-option-jquery

Maybe add screenshot because its little hard to understand your issue.

Dylan_Snowden · January 29, 2020, 5:47pm

Yes I was thinking of using something like that if I had too.

This would only need to be used on the Product Template page. I thought I’d be able to use the Dynamic List conditional functionality in some way.

johnramos · February 9, 2020, 3:58pm

Hi @Dylan_Snowden! This was recently updated and you should now be able to change conditional visibility options depending on the product variant SKU.

drungsea · October 26, 2020, 9:28pm

@johnramos Is it possible to hide certain options for products? For example I have 3 options for a product with different pricing, but I want the “member-pricing” option to only show up for logged in members, and hide the non-member pricing. And vice versa.