– 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)