- Hey designers. Welcome back to my online
Storebuild series. If you've missed the first three in the
series then there'll be a link in the cart
and also in the description where you can go
and check those out.
I've built out my storefront, the Colabri page,
the product page. Got all my prints and products I'm
selling set up in my store with shipping zones, etc.
There is a very vital thing missing though that we're going
to tackle today and that is the shopping cart.
So in this video I'm going to be showing you how the cart
works in Webflow and we're gonna be designing it
and getting it to look how I want.
Alright. Let's get into it.
(reggae music)
We've already worked with the cart a bit already
because you've seen this cart button on all of the pages
that I've been designing and building out so far
because obviously I want people to be able to access it
from any where. I don't want anything from stopping them
from going ahead and buying my prints.
You might notice if you've clicked on the link
that I've been leaving in the description
and tried out for yourself that when you enable Ecommerce
the cart isn't one of the pages that gets created for you
and that is because instead of being a separate page,
it's like an overlay that you can have on any page.
To view it, I'm gonna click on my cart button
and then in the settings click Open Cart.
There's a few different options that Webflow provides
for how you can have this cart appearing.
It can be a modal handling out in the middle here.
You can have it appear from either side
or it can also be a thing that like drops down
from the cart itself. Personally, I'm kinda liking the idea
of a modal, I like that it's in the center of the screen,
focused. I think if my design had the cart, like, anchored
to the side of the screen, then I'd probably go
for this one because that seems like it'd be a nice user
experience, but yeah. We're gonna work with the modal one.
You can also edit how it appears. The easing, the time
did it takes, and as you can see, it's pre-filled with
several items. Obviously, they won't be pre-filled when
people are visiting my site but this is just a preview
so that you can see how it look with real content.
And I really like how you can adjust the number of items
in it so you can get a feel for how your cart's gonna look
if your people are buying a lot or a little.
I haven't done anything to this cart this is just what it
looks like out the box as part of the component
but just like you saw me do on the cart button,
how I swapped out the shopping cart icon,
you can add things to it, you can move things around
in the Layers panel right here.
The reason that this cart kinda really looks like it fits
with my site a bit is because, like I showed you in a
previous video, I had setup a style guide page with all of
my textiling in it. When I first created my website
(inaudible) H4 hid in here, how that is in the capitals.
If I go back to a store page, open that cart again.
This is an H4, which is why it's already styled to
look like the H4s on my site because I set that up already,
so, just another recommendation for you to create a style
guide like that when you're first starting out with a site
in Webflow. It's gonna make everything a lot easier for you.
Let's get into styling this. I think there's a few things
I wanna do to it just to make it look more like it matches
with the rest of my site, starting with adding
some more color.
(happy beatbox music)
I can make this say whatever I want, too, so I'm gonna
like, I dunno, let's not be so serious.
(happy beatbox music)
I feel like this Remove link is way too big. It almost looks
like I'm encouraging people to remove it, so I'm gonna add
a little trashcan icon to make this a lot smaller.
(happy beatbox music)
So I'm dragging in a little trashcan icon that I've made.
Well, when I say made, I mean I got it from Noun Project.
But I exploited it and put it here into Webflow
and then just changing the text size and color
and it is in the hover states as well, just to make sure
that it is has some type of interaction when you hover
over it so people know it is a link that you can use to
remove an item.
(happy beatbox music)
Adding shadow to my images cause that's just a thing
that I've been doing across the site.
(happy beatbox music)
Then changing the size of this text as well
because it is a component that you can edit old pieces of
I've dragged in and you hitting element to make it,
I think it was an H5, instead of what I had there
to start with.
(happy beatbox music)
I'm doing the same thing for the subtitle line as well.
I want that to be an H6.
(happy beatbox music)
I think I'm just going to add a bit more space between each
of these cart items. Let things breathe a bit, you know?
(happy beatbox music)
Obviously we don't want our menu overlapping like that.
(happy beatbox music)
So that's just a reminder that if you used Z-index
for various things in your design make sure
you increase the Z-index on the cart so that it sits on top.
(happy beatbox music)
I think it's looking nice. It's looking like it matches my
design but one thing we can't forget to do is design a
the status for if there's nothing in your cart or,
I dunno, something goes wrong. So in the panel at the site
here in the settings panel, I can click on Empty to preview
that and I can click on Error to preview that.
So, let's just edit these things a bit.
(happy beatbox music)
Skimmed some rounded corners to match with all the things
I've done on my site and send everything because I feel like
that looks best with this checkout.
And let's try to do something a bit more fun for if there's
nothing in here.
Wanna create like an empty status, so I want it to look
almost like the printer's missing. Maybe that'll encourage
people to go add some. So to make my empty print I'm
basically just making a dashed line around rectangle
in Figma, exploiting that and importing it into Webflow,
changing the size and the positioning using flexbox,
and setting MX to it so that it looks how I want.
(happy beatbox music)
There we go. I think I'm happy with that so if there's
nothing in the cart, it'll show this when they try
and open it. That is my shopping cart done now people are
gonna know what they're buying.
Coming up next in the next video we're gonna work on the
checkout page, which is another really important page,
and the order confirmation page.
So once people submit an order this'll be what they'll see.
Stay tuned for that. We're getting really close to the end
of the store design now, which is exciting.
I can see the finish line.
And like I've said in all the previous videos, if you
haven't checked out Webflow yet, then there's a link on the
screen right now, also in the description. Go check it out.
It's free to create an account and just start playing around
with all this stuff and seeing how it works.
Maybe you can build your checkout page
and order confirmation alongside me for the next video.
Alright. Thanks for watching. Hope you enjoyed it.
Give it a Thumbs Up if you did and I'll see you in the next
video. Bye.
(reggae music)