April 8, 2020
Customizing the cart button — Webflow Ecommerce tutorial

Customizing the cart button — Webflow Ecommerce tutorial


The cart button. There’s a lot to cover about this. But we’ll do it quickly and efficiently,
maybe even cutting into some of the rambling dial– (1) anatomy of the cart button, (2)
customizing default elements, (3) adding and removing elements, (4) the cart quantity element,
and, if we have time, (5) showing the subtotal inside our cart button. Let’s take a look at the anatomy of the
cart button. If we dig inside, in our Navigator here, we
can see it has a few things: it has an icon, it has some text (in ours it says “cart”),
and it has a cart quantity element. (That’s the current number of items in a
customer’s cart.) Let’s talk about the icon. Specifically the icon color. Want to change it? Make sure the icon’s selected. You know how we change text or font color
for our typography? Look: same thing here. That’s icon color. Cart text. A while back, we saw a text block. And in the script for this very video, we
mentioned that in ours it says “cart.” But we can do more here: We can edit the text
of course, but we can also get text from our actual cart — check this out: we can grab
the text that reflects our current quantity or our subtotal. Gives us a lot of flexibility in the event
we don’t want it to say cart, as it did earlier in this very video. What about cart quantity? This text block is already connected to the
cart quantity field. And you can style this just like you can style
any text element. Now let’s look at adding — or even removing
content from our cart button. You can add stuff to the button. Just…add stuff to the button. You can delete stuff from a button. Just delete. About the only thing you can’t delete is
the cart quantity element. But you can hide it. Let’s dig into that. Cart quantity. We can double-click the element called cart
button. (That’s our cart button.) From here, we can hide the cart quantity by
toggling the switch. We can turn it back on. Then off again. And back on. And in the cart quantity element itself? We can go over there in the Navigator — just
selecting our cart quantity element. And we can use this (under element settings)
to hide the cart quantity if the cart is empty. That means there won’t be the number zero
if someone hasn’t added something to their cart. Finally, we can show the subtotal separately
in a cart button. If you want to show the subtotal, you can
add a text block to your cart button. And like we demonstrated before, from our
settings, we can get the text…from the cart subtotal. So. That’s a lot we covered. To quote Dickenson, “Saying nothing sometimes
says the most.” So we’ll just mute for the r–

5 thoughts on “Customizing the cart button — Webflow Ecommerce tutorial

  1. I demand to see a behind the scene video of McGuire!!!!! I’m loving the e-commerce btw… way to make me fall in love with webflow guys!

  2. Awesome. I just want all the basic features right away 🙂 A text field where a customer can leave info right away, like allergies, or something like that.

Leave a Reply

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