- 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.