Create designs that flex based on Ecommerce product and order data

<p><a href="<https://university.webflow.com/article/conditional-visibility>">Conditional visibility</a> has now been extended to support more <a href="<https://university.webflow.com/category/ecommerce>">Ecommerce</a> use cases. You can now dynamically show or hide elements across your site based on unique variant fields, and order data.</p><h3><strong>Show or hide elements for unique product variants</strong></h3><p>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.&nbsp;</p><p>‍<br></p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1274px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1274px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21cdb40CD3GOV1MlI4EQvP9qqc-sLrCFHptbGOX7TwKzvd4bT47n6LThAmAmlxUPgCywbjfx8YMVky8MwK1TDM8nN7TWW43nKqIBMhPxRfNKyyloj25u-BUnLRYBoOZkChAZd69eautGSN.gif>"></div><figcaption>Create a design for on-sale product variants by setting conditional visibility based on the compare-at price.</figcaption></figure><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1034px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1034px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21cdb6GoBMZVz1DxM3pe-5peMKM5wul7i9U7mVZOsm-mSf5C2ayZvt6eNvSRnP8sV39DX6rQQn5UHf4WaArTXXituTASYs88PT7hR60kZ9WbccTPQfmtXdLR2p-jYYtxRwgXYPCQmXwr.gif>"></div><figcaption>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.&nbsp;</figcaption></figure><h3><strong>Create special designs for products that don’t require shipping</strong></h3><p>Late last year we launched the ability to <a href="<https://webflow.com/feature/orders-that-dont-require-shipping>">indicate whether or not a product requires shipping</a> through a toggle on each product detail page.&nbsp; You can now set conditional visibility based on that same toggle to create unique designs for products that do or don’t require shipping!</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1222px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1222px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21cdb5rDUfVoyfMJnG5dqLa5a4Q-PmszQleKIHsebyI2YeyLsIJ8JWehJgzNeL-WfxB0lsyQwkIkQTemAXC0lVrxHARj5ylB-88lBWgabDNIrpiRJXh4QNmQhr4fupjL9QhB8l0JQkw8.gif>"></div><figcaption>Let customers know they can pick up any non-shippable item up in store.</figcaption></figure><h3><strong>Design custom checkout experiences that update in real time</strong></h3><p>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.&nbsp;</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1280px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1280px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21cdb3O8ek-3pc5Ulr9gk3nCtadNC4VO4i8l4-ms5NMqRifdwJKoL399McLPg1PrZJOv_BwizGwgqhJpIA8Pk2bpCttjUe2vwjCd5BkjyIhASNc4qFmAVmrPsa93sxQuRm0tZwoX7kQD.gif>"></div><figcaption>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.</figcaption></figure><p><a href="<https://university.webflow.com/article/conditional-visibility>">Learn more about conditional visibility</a> on Webflow University.</p><p><em>Shout out to</em><a href="<https://www.article.com/>"><em> Article</em></a><em> for such great mock products. </em></p>