All updates

Enhancement

Ecommerce

Create designs that flex based on Ecommerce product and order data

Conditional visibility has now been extended to support more Ecommerce use cases.

Create designs that flex based on Ecommerce product and order data

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.

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.


Launched on
February 24, 2020
Category
Ecommerce

Related updates

Now manage orders in the Designer

Now manage orders in the Designer

Learn more
Webflow Merch Store Launch

Webflow Merch Store Launch

Learn more
Create new product shopping experiences with variant selector buttons

Create new product shopping experiences with variant selector buttons

Learn more
New default product types make it easier to sell downloads and services

New default product types make it easier to sell downloads and services

Learn more
Do more with Ecommerce discounts

Do more with Ecommerce discounts

Learn more
Buy Now buttons for Ecommerce are here

Buy Now buttons for Ecommerce are here

Learn more

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Get started — it’s free
Watch demo

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.