Display sale prices by setting a compare-at price

<p>Running sales, promotions, and discounts is a huge part of running an online store. Today we’re releasing our first feature in this realm: the “compare-at price” field.</p><p>The compare-at price field lets you display an “original” price that is more expensive than the price you’re selling the product at (in effect, marking that that product is on sale).</p><p>This new field — combined with the power of <a href="<https://university.webflow.com/article/conditional-visibility>">conditional visibility</a> — allows you to create inventive sales and merchandising designs on your store. Let’s take a look below at some of the core workflows for using this new compare-at price field. </p><h3>Setting a compare-at price</h3><p>Setting a compare-at price is pretty straightforward. Just open the product details in the Designer or Editor and set a value in the compare-at price field.</p><figure class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c733kSTjwGpxjMr3nKM6xYmvV9WL8K6lviA7dgQmn0D6oBajpjarBRI7zLjYmlqZ2FEt-7JRyOPL6Ke9fkJ2ojdysAQcYMXpP5cwq5xhZ0yceor4PeUoJRYd6SQMETlO56V6tmvVCJ.gif>" alt="Compare-at price field detail view"></div><figcaption>Product details &gt; compare-at price.</figcaption></figure><h3>Displaying the compare-at price on a product page</h3><p>Let’s say you want to show the compare-at price on your product page, styled in a different color and struck through to indicate the price has been … how do you say, “slashed?” Again, pretty straightforward: add a new text element to the page and connect it to the compare-at price field. Then, style that element however you’d like.</p><figure class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c658VPaiYuEfX7tTSEDrtLnPwu5HmuHvIDfzBMzYlSNiWDEQDknXA43iEGi1o0ySdGqOCUu7WdZuePM5IBz6yjZBFWiOQevTE68BRH7CswN746sCHy1k-BjRq-aM7cbDoTDY3lM-EB.png>"></div><figcaption>Connect a text element on your product page to the compare-at price, then style as needed.</figcaption></figure><h3>Displaying sales banners</h3><p>Often, you’ll want to add a small banner or callout on your browsing pages to point out products on sale. With this new compare-at price field and some help from <a href="<https://university.webflow.com/article/conditional-visibility>">conditional visibility</a>, you can do this pretty easily. Simply create the callout element you have in mind, then set it to only display if the product in question has a compare-at price set.</p><figure class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c73cOlb-elaqQJ2196us5sNgBmEiLLkvdjXWSISVJW-ZXL4iLSnzQJKL72iF1s5MruHSOEqvM2qtgc2-hp1ZbIudxVoPdwOMWm1AHfbY7rXIlFhg-OruXzIGsi76rILr_7vIIwc7x.gif>"></div><figcaption>Only display the sales callout element if the product has a compare-at price set.</figcaption></figure><h3>What’s next</h3><p>This new compare-at price field is only the first step toward making it easier to run sales on your Webflow Ecommerce store. We’re still planning to build out a more comprehensive system for creating and managing <a href="<https://wishlist.webflow.com/ideas/WEBFLOW-I-1632>">coupon codes</a>, discounts, and other promotions.</p><p>If you have ideas or requests for additional features, be sure to let us know by submitting new (and voting on existing) ideas to the <a href="<https://wishlist.webflow.com/?category=6579779972431486791&sort=popular>">Webflow Wishlist</a>.<br></p>