Conditional visibility has now been extended to support more Ecommerce use cases. You can now dynamically show or hide elements across your site based on unique variant fields, and order data.
Show or hide elements for unique product variants
Tie specific designs to unique product variants by setting conditional visibility on variant fields like the main image, compare-at-price, length, width, SKU and more.
Create a design for on-sale product variants by setting conditional visibility based on the compare-at price.
In this example, we’ve set conditional visibility on two versions of the price: one in red that only displays when the compare-at price for the product variant is set, and one in black that only displays when a compare-at price isn’t set.
Create special designs for products that don’t require shipping
Late last year we launched the ability to indicate whether or not a product requires shipping through a toggle on each product detail page. You can now set conditional visibility based on that same toggle to create unique designs for products that do or don’t require shipping!
Let customers know they can pick up any non-shippable item up in store.
Design custom checkout experiences that update in real time
Show or hide elements in your cart, checkout page or order confirmation page, based on the order subtotal, total, shipping address elements and more. This opens up the possibilities for creating custom checkout experiences based on any criteria you want.
Display a Free Shipping banner to your customers until they hit a subtotal threshold that you set. In this example, the banner is hidden because the mock subtotal is more than $1000.
Learn more about conditional visibility on Webflow University.
Shout out to Article for such great mock products.