Designing the checkout page! | Webflow Ecommerce series – Episode 5
Articles,  Blog

Designing the checkout page! | Webflow Ecommerce series – Episode 5


– Hey, designers, welcome back to my online store series where I’m showing you the full process of building out my store using webflow ecommerce. We’ve gotten pretty far into the build now so if this is the first
video that you’re watching in the series, you might wanna go catch up on the rest. There will be a link
to a playlist in a card and also in the description. We can go and check those videos out. In this video we’re getting
on to a really important part of the store and that is the checkout and the order confirmation page. So that, the page that people see after they click ‘place order’ and
buy their prints from my store. (upbeat music) In the last video I showed you how the cart works in workflow,
how it was a component that I could add things
to and style how I like. And the checkout page is kind of similar. If we come over to our
pages here you’ll see that checkout is one of the pages
that gets created for you when you enable ecommerce
on your webflow site. So let’s go into this page. Basically you’re going to see a lot of very wide form fields,
this is not a blank page, and I like that they’re
not making me start with a blank slate for the checkout because that would
require me to think about and remember all the
details that need to go in. This is all the compulsory stuff that needs to be on your checkout form. But obviously I can work with this and style it however I like. Just like I’ve been doing
with other components so let’s get into it. I didn’t actually create a design in Figma for the checkout page,
like I did the other pages in my store, just because I didn’t feel like laying
out all these boxes to be honest, laying out
all these form fields. I think I’m just gonna go with my gut and design it on the
go and create something that fits with the rest of my site. If you do wanna design
it in advance which, to be honest, is a pretty good idea. I would suggest looking at this page and seeing what all the fields are so you can make sure that
you’re including them in your design as well. It’d be a handy thing to refer to. (calm music) Oh, hey, it’s voiceover Charli back again to explain what I’m doing. I’m just editing in a
section for my header here. Making it green and then
I’m adding in the symbol that I created previously. I think it was in episode two for my menu. Now I don’t really want
my form to be stretching the full width of the
page so I’m gonna add in my container div here. And then I’m gonna add
some columns actually. Because I want people to be able to see what they’re ordering
as they’re going through and filling out the form. I think that they’re reminded of the great products they’re gonna get at the end of all this then they’ll be more encouraged to actually go through and fill out all these form fields. (calm music) So I just moved all the
details from the checkout form into one of the columns and then if you go to your elements
panel you’ll see that when you’re on the checkout page that there’s a few extra
elements you can add. So I’m gonna add this order
items one into the second column and that’ll mean that
my items will be there hanging out next to the form. And at the bottom I’m
actually gonna make use of this other one which
is the order summary. I’m going to add it right
underneath the billing address. I want them to see, okay, this is one last final check,
everything I’m ordering and what I’m paying for. Personally, I always like to be reminded of exactly what I’m paying before I click that ‘buy now’ button. (calm music) Just like I’ve done
some overlapping things on my product pages, on my product cards, I’m gonna have this checkout form overlap the green header section here. So to do that I’m just gonna add a negative margin to the top, move it up. Here I’m just going through and adding some classes and styling on this block. To take away the default that it had and add in my own
styling to match my site. So I’m changing the borders,
changing the background, adding a little bit of a shadow to it, basically, just getting it to look like it fits in with the rest of my site. (music continues) I’ve added some rounded
corners to this block. And now I’m just gonna got
through and apply that class to all of the other blocks on this page. So once I’ve made that
class on that first box, it’s pretty easy to just come down and click on each other
element that I needed on and add the class to, you just have to start typing
your first few characters and then it appears in the drop down list that I can click on. Just playing with the spacing a bit, making sure everything feels like it’s got you know, a bit of breathing room. And, of course, can’t forget this button. Making it green and with capital
letters for the button tags just like all the other ones on my site. These required signs are
looking a little bit obnoxious. So I’m gonna go through and add a class to make them a bit smaller. So I’m doing the same thing here where I make a class and styling for one box and then I just go through
and apply that same thing. And then I’m doing the same thing again for all of the form field
labels on this page. It’s starting to match
my design a lot better. Maybe the color in these fields should be a little bit different. I feel like the gray I’ve been using on my site is a bit cooler. (calm music throughout) I want this little block here of my items, there’s still some styling to do with it. But I want it to stick there
on the screen as I scroll down. So that it’s always in
view as you’re scrolling and finishing this form. If I set flex stretch on the
div that contains my columns that means that both of my columns are gonna be the same height. And then, what I can do, is use one of my favorite little CSS hacks. Let me add a class to this. I’m gonna position this
item block as sticky. Which means it’ll stick in the place for the whole length of the div. Let me add a height to it. Let’s test it as I
scroll down, there we go. That little auto block stays in place. And, actually, if I want to add a little bit of padding above it. There we go, I think that’s nicer. Because these prints
here kind of look like they did in my cart, I’m gonna style them just to make sure they look kinda similar. Copying in my photo like I’ve
done on all the other pages. Doing a little bit of rearranging here in this auto summary block. Just to make things sit
where I want them to. To kinda match with the cart, like I said. And then changing the
styling of the text as well. Right now I’m just
swapping out the text here to be H6 headings, so
that it matches better with the styling that I did on my cart. So even though this isn’t
a seamless collection we created or anything, it works the same throughout the checkout form. So right here for this
H6 I’m gonna tell it to get the text from the extra items which is what this block is called, name. And then it’ll put that in there. And this is their shipping class, so whatever shipping
class they’ve selected that’s what will show up there. You gotta be careful to
make sure you’re doing that because you don’t want to type that out manually, what you see here in the example page. Because, obviously, you
want it to be updated depending on what people
select in your checkout. You can tell something’s
done in the content in your layers list by if it’s purple. So I know that anything that’s purple I have to make sure I
can connect it to a field if I’m gonna be changing out
the way things are arranged and what element is used there. Cool, I think I’m happy with that. Let’s just check out what it looks like on different device sizes. This one obviously needs some work. The cool thing about flex box, I like that you can set
it to be horizontally arranged on one break
point but then vertically on another, it makes it really easy to change things around for
break points like this. And basically what I’ve decided to do is just center all this content. I thought that that would look better on this size screen. I can make use of flex box ordering here to put my items in order list up the top on mobile. When it can’t really
follow you down the page because that would get annoying and take up too much room. For this screen size I decide that perhaps I didn’t need to have my prints taking up quite so much space just ’cause, I don’t know, they’re taking up a lot of vertical screen real estate. So this is my checkout page done. I’ve added this little block at the side that scrolls down with you and reminds you what you’re ordering. And then I added the auto summary, too. Let’s make sure we also
style the error states that we need to as well. I think that’ll be fine. Okay, let’s move on to
the auto confirmation. And what I wanna do is
make the auto confirmation look fairly similar to the checkout just so it’s a nice seamless experience. Once you’ve hit place order that you’re ending up in a familiar place. To do that I’m gonna copy
this header here actually. Just hit copy, come over to the order confirmation page. Just like with the checkout, this one put in the vital
information in the page for you. And there’s a bunch of extra things you can add so if you wanna remind them what payment info they used,
what order items they had, all that sort of stuff
is things I can add. Starting out with this,
just like the last page for adding my header but this
time I just copy and pasted it from the checkout page,
the footer as well. And I’m doing the same
thing here where I’m putting the form into a container and then also adding columns to it. I’m gonna copy this block here with the items in my order, bring it over, and paste it into the column here. Do you see where I’m going with this? I’m kinda gonna style
these elements to match the checkout form. Just like on the checkout page, going through and adding that same class that I did for the blocks on there so that these will match exactly. It also means that if I decided I wanna change that style, I just have to change it on the class and it will automatically update across all of the places I’ve applied it. As you see me swapping
back to the check out page, every now and then,
while I’m laying out this order confirmation page. It’s just ’cause I wanted to check that visually these things are aligned and that they’re looking like
they came from the same place. I also started to style the auto summary and then realized, duh, I already had it on the checkout page so should just copy and paste it from over there and all of the styling that
I wanted would be attached. Alright, I think I’m done. So here is my finished checkout page. As you’re scrolling down and
filling out all these fields this little block will go down with you. Once your order is placed
this is what you’ll see. It’s the same sort of layout
so it’ll look familiar and it will look like
it’ll have good continuity. And again, this little item box is sitting at the side
there as you scroll down so you’re always reminded
of what you ordered. This brings us to an end, actually, of all the pages that I need to design in order to get the store live so that feels good, we’ve
made some great progress. There is a few last little
details left, though, that we’re gonna tackle in the next video which is the last video in the series. Things like some final settings, the emails that customers will be sent when they place an order. I gotta tackle the design of those. Make sure that they’re all cohesive and looking like they came from my store. So stay tuned for that, that will be in the next video. If you’ve been liking the look of weblow ecommerce from
what you’ve been seeing in these videos so far then you should go check it out for yourself. There will be a link on screen right now also in the description
where you can go and check it out, start
playing around with it, and making your own online store. Alright, thank you for
watching this video. And I’ll see you in the next one, the last one in the series, alright, bye.

3 Comments

Leave a Reply

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