Running sales in your store — Webflow Ecommerce tutorial

When you’re looking to add a discount (offering
a sale price to anyone who views a product on your store), there are a couple of quick
tweaks to make it happen. And you can make these tweaks from the product
itself. Simply, if your item is priced at $100 but
you want to sell it for $80, just change the price to $80. That’s it. Except it isn’t. A very common workflow is to make the original
price the compare-at price. Why? Because in most sales, we’ll want to display
the original price. (The item is now $80 — it’s on sale. And we want to compare that — we want to
show the original price is $100.) That’s how we add sale prices. What else can we do with this newly-acquired
skill? We can add a sale banner — we’ll just
drag in a text block (from our add panel). And once we drag it in, we’ll edit it. We’ll simply write out “on sale.” Why? Because the item’s on sale. And we can style it however we’d like. We can modify the colors — just go in and
change the background color to something. (Maybe a blue.) And notice how changes on this sale banner
are affecting the sale banners on each product. Changes like padding. We can position it on the top-right. And what we’ll do for this is use position
absolute. Because we want to position the on-sale banner
on the top-right here. Remember: position absolute requires that
one of its parent elements (in this case it’s each of the products) — position absolute
requires one of its parents to have relative positioning (or really any positioning that
isn’t auto). We can tweak it, we can move it — but we
might also realize it’s showing up on every product. It’s showing up even though some of these
things aren’t on-sale. We only want this element (the on-sale banner)
— we only want it visible if we’ve gone in and actually added a compare-at price. [go back to showing when we typed in a compare-at
price] So all we have to do? It set conditional visibility. Basically, this means we’re only going to
show it (the sale banner) if our product (the product that’s on sale) actually has a compare-at
price. That means the banner will only show up for
products that have a compare-at price listed. Finally, let’s look at how we can show the
compare-at price on the product page. Just like any text item, we can drag in a
text block (or this could also be a heading, or anything with text). We can drag in a text block and connect it. (We can get that text from the compare-at
price.) Why is that important? We’re showing the sale price (the current
price). But we probably want to show the old price
(the compare-at price), and then style it a bit. (We’re just styling the compare-at price.) And by the way, this applies to every product
that has a compare-at price. (It works for all of them.) Just make sure: if you’re creating something
that you only want to show up on product pages that have a compare-at price, make sure you
use the same trick as before. (Set a condition.) The element is visible only when the compare-at
price is set. If not, you could end up with things like
empty divs or empty headings in your code. And you can find creative ways to show the
original price. Like adding strikethroughs. Or going in and displaying the original price. Or, binge-watching the first four seasons
of The West Wing, then going in and displaying the original price. But that’s the big picture. That’s an overview of sale prices in Webflow

, , , , , , , , ,

Post navigation

One thought on “Running sales in your store — Webflow Ecommerce tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *