Customizing the shopping cart — Webflow Ecommerce tutorial

The shopping cart. A metaphor based on a mid-20th-century invention
called a shopping cart. In this video, we’ll cover choosing the
cart type (these are a bunch of different starting points for your cart design). We’ll cover how to customize the animation
on the cart. And finally, we’ll talk about styling the
cart in different states. Let’s start at the top. So where does all this start? It starts with a cart button. And you drag this right into your project
from the add panel. All we have to do? Is go to our element settings. There’s a lot going on here, but we’re
focused on this: the cart type. Which is why we put up on the screen an enormous
number with the words “cart type.” This is our default cart. We can preview it by pressing open cart. If we want to change it? Maybe we want it to go on the left? We can do that here, too. Same with the right side. And that last one? We can make the cart a dropdown. And one note about dropdown: we gain the ability
to set our alignment (that’s whether we want it to be aligned to the left side or
the right side of the cart button). And we gain the ability to open our cart on
click. Or, if you want it to open on hover, just
choose hover. Let’s talk animation. We’ll go over to preview mode to see this. Click on the cart? That’s the animation. Let’s close out. What about our other cart types? Here’s the default for left (the cart on
the left side). And here’s the default for our cart on the
right side. And finally, let’s look at the dropdown
animation. You might be fine with the defaults, but there’s
a chance you want to be edgy. Or experimental. In the dropdown, we can control easing type
and under that, we can adjust our duration. 1000 milliseconds? What is that in seconds? Let’s find out. [typing “what’s 1000 milliseconds in seconds” into Google] That’s 1 second. We can test the effect by going over to preview
mode. Click our cart? That’s ease-out–quad over 1000 milliseconds. What about designing in different states? There are three. Default, empty, and error. But let’s look at this in a blank project. You might notice that we can’t immediately
style default and error. That’s because we have to add products. And we’ll use a quick feature here — we’ll
use CSV import. And if we don’t have something to import? If we don’t have a CSV of our own? We can use this CSV template. This template is a good example of how to
format bulk items in a CSV. But right now, we’re not going to make any
changes. We’re just going to import it back into
Webflow. Why? Good question. Because: when we do? We get sample content to work with. (Sample products.) Once that’s imported, (or once we create
products in our project), we’ve unlocked the ability to use other states. So. Default. This is the default state. We can sample what it’ll look like with
a certain number of items in our cart. Want to simulate three items added to the
cart? Go to three. Want to simulate 15? We can also style any of this. Font, layout, alignment — we have the same
controls here that we have in a CMS collection. So that means changes to one cart item will
affect others. Move something in one? It updates — it moves in all the others. And what about that cart container? Want rounded corners? We can simply add rounded corners. Want to change the background — the cart
container background color to blue? No. Because that looks hideous. What about the empty state? This is what we see when don’t have something
in our cart. We can change or add items — in this case,
we’ll change the text to “there is literally nothing in your cart.” And we can add a GIF. What kind of GIF? A GIF that we can drag right into our cart. This will show up when our cart is empty. That’s the empty state. What about error? Once we’re over in the error state, let’s
click on the error message itself. So there are a ton of options here. And by a ton, we mean three. You can style it however you want, but you
can also choose from three types of messages. Three errors that are generated based on what’s
going on. Quantity not available, checkout disabled,
or just a general error message. Now. The benefit of having all these options is
that you can make this whole thing look and feel however you want. Are you interested in drop shadows? So are we. Are you a fan of adding tremendous amounts
of top margin to your elements? Go ahead. Want to make your price massive? Let’s do it. Have an idea in which your cart responds to
the position of the mouse? Of course you can do that. This is Webflow. We have a ton of content on interactions (and
other topics) — as well as the CMS. This is all on Webflow University, so: check
it out so you can learn more about how you can use everything. In the meantime, here’s a slide that shows
what we just talked about. We make these in Keynote.

, , , , , , , , , , , ,

Post navigation

4 thoughts on “Customizing the shopping cart — Webflow Ecommerce tutorial

Leave a Reply

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