- Hey designers.
Welcome back to my online store build series
where I'm walking you through the full process
of me building out my new store using Webflow Ecommerce.
If you missed the first two videos in this series
then they'll be linked on a card in the description.
In those, I gave you an introduction to Webflow Ecommerce
and also took you through the build of my product page,
this page right here.
And today in this video
I'm gonna be taking you through building out
the category page.
So that's the page that shows like all screen prints,
all map prints, et cetera,
and also the storefront.
So this would be like the home page for my store.
there'll be a lot of building,
a lot of connecting things to CMS fields,
a few fun interactions I'm planning, as well.
Should be good,
so let's not waste any more time talking about it
and just dive in and get started doing it.
(upbeat theme music)
So just a refresher, this right here
is the design for my category page.
Basically it's gonna have filters, almost,
to click through each individual category.
And if you notice, these cards here
where I've displayed a print,
look pretty similar to the cards
that I already built out in the last video
for displaying in the small print section.
So, we're gonna be able to make use
of some copy and paste there to make that faster.
And then this is the storefront page
that I'll be building.
This side bit here is fixed, and then the prints
will scroll at the side.
And it's this overlay
that I've got some fun interactions planned for.
So let's get into it.
In the last video we were working
with the Products Template,
in this one we're gonna start with the Categories Template,
which again, is just a blank page when you dive into it.
(upbeat theme music)
Because I saved my navigation on the Product Page
as a symbol, it's pretty easy
for me to just add it into this page.
So there's no need for me to go and build that out again.
Next let's tackle this bit here
with the prints and the switches.
(upbeat theme music)
To get these little category buttons in,
I'm actually going to insert a collection list
that pulls in the names of each of the categories,
because that way, if I add any categories in future,
it'll automatically add itself to this page.
There won't be any need for me to do it manually.
Well, hello there.
It's voice-over Charli back again
to tell you what I'm actually doing here.
And in this bit I'm just adding a collections list
and connecting it to the categories collection,
then styling it using the classes
that I've already got set up
for these pill-shaped tag buttons.
I want these little buttons to match the same color
as their category.
So I'm gonna get the text color from the color fields
and also get the border color from the color fields.
Here I am setting all these tags
to have an inline block block display,
so that they all sit on one line.
Then adding a gray opacity hover for the current category,
and also for the hover state.
Now, I add another collection list,
this time connecting it to products.
And what I'll do is in the filter,
I'll limit it to only ones where the main category
equals the current category.
Meaning, it's only gonna show the ones
that relate to the category of the page we're on.
And like we talked about in the start,
I can come to this product page.
I'm gonna select the div that contains all the stuff
on this product card, which is called Product Card.
I'm going to just go Command + C to copy it,
then paste it into here.
Just need to do something with the width.
(upbeat theme music)
So I've just noticed that I connected the wrong thing
when I did this list.
Instead of doing the Main Category,
I need to do Categories, Contains current category.
That's it, that way my prints will still show up
if they have multiple categories on the page, my bad.
All right, so we need to make sure
that these wrap around each other.
And if I change this to Center,
then see if the whole row's not filled,
then it'll sit in the middle,
which I think just looks a lot nicer.
And because I copy and pasted
my interaction that I showed you
that I was making in the last video,
where my prints popup on hover,
that's come along, too.
The last thing, really, that this page needs
before we go and check all the different device sizes
is the footer, obviously.
So, for that I'm gonna come back to the Products Template,
and again I'm gonna copy and paste this.
Seems to be working.
Okay, let's see.
Here I'm just going through and editing the width
of these product cards for the small screen sizes,
just so they sit a bit nicer in the space.
And at this stage I also notice
that I can go up to make my menu responsive
when I was going through and making the product page.
So, just quickly fixing that.
So that's the category page done.
Let's move on to our store front.
I'm just gonna click here to create a new page,
and just call it Store.
This one's gonna be built in a bit of a different way
to the rest, because we don't have that top navigation
like we do the other pages.
This is basically two blocks.
There's this purple side block
and then the gray on the other side.
I'm gonna start with this side bar.
And I think I'll make this take up
like a third of the screen,
so it doesn't matter if your browser is wider or smaller,
this is gonna be a third of the screen.
So let's get started.
(upbeat theme music)
Typing in 100 V8 for the height
means 100 percent of the view height.
So that means that it'll always be
the same height as your browser window is.
If that shrinks, then this div will shrink, as well.
And let's make this fixed.
(upbeat theme music)
Here I'm going through and adding
some padding to this in a container
that sits inside my purple box,
which will hold all my content.
And I'm adding a max width to it of 330 pixels,
because even though the purple side bar
is set to be a third of the width of the screen size,
so it doesn't matter how wide your screen is,
I want to make sure that the content inside my container
doesn't go too wide.
So setting a max width on it
means it'll never get wider than that, 330 pixels.
Here I'm adding the content into this container here,
like my footer links and styling them
so they match my design.
And then I'm trying to get all this content
to sit in the right place.
Basically, I want the logo and that upper block of copy
to stick to the top,
and the footer links to stick to the bottom.
So, I'm playing around with Flexbox settings
to try and figure that out and get them to stick
to either side of the box.
Just like I did on the categories page,
I'm gonna make this list of categories here
by adding a collection list in.
I want this collection list of categories
to stick to the top, as well,
so I'm adding that into my div
that's sticking to the top there,
and then I am borrowing styling from other pages on my site.
So I've used this styling on my blog.
So I can just go and copy and paste that
to see what classes I used to get the divider line
and to get the type styled like I wanted.
And now that's all gonna match.
In order to get his scrolling prints thing
working at the side,
I'm gonna add columns to the body,
just because if I add things straight into the body here,
it's basically gonna have this fixed side
by overlapping it, because that is in a fixed position.
So, if I add these columns in,
and I just put all my things in the second column,
this one will stay empty,
and I shouldn't have any problems with that.
Let's see.
I'm adding another collection list
into this right-hand column here.
And in this one I'm gonna fit everything
from the Products Collection.
So this is gonna display all of my prints.
Add an image, and I'm gonna get the image
from my product field, the main one.
Styling my images, I set a 50 percent width on them,
so that they'd sit in two columns,
adding margin and also adding a shadow to them.
And then changing the way they're arranged,
because I decided it was more aesthetically pleasing
to have the antler print up the top.
You can see how that fixed sidebar is working
now that my prints are in.
See, as I scroll along the page,
this is the only bit that moves.
I want that to stay to the left, though, I think.
Now the tricky part is adding in this overlay function
that you'll want it to have.
So, let's just call this hover overlay.
(upbeat theme music)
I'm gonna make it fetch the background color
from that color category.
Then let's just feed the opacity of it a bit.
Obviously it's not working on this one,
it's gone a little bit over the print,
so I need to sort that out.
(upbeat theme music)
There we go.
That was the problem.
I knew it was something to do with, like,
position of Flexbox, but it was the fact
that I had it set to stretch on the container.
So obviously it was stretching everything up, duh.
(upbeat theme music)
So basically what I've done here
is created a div that has this color background,
and it's also got all of the hover content inside it.
(upbeat theme music)
Okay, so all of the details are in here.
Actually, did I link this up yet?
I did not, there we go.
Okay, all of the stuff is there,
now I've got to work with it to create the interaction.
So I'm gonna set the interaction on the print container,
and say that whenever you hover over it,
we're gonna start animation
and start putting this thing together.
There's a few moving pieces here that I want to do.
I want the color to kind of emerge from the bottom
and fill the image,
and then I want all this white text
and the information on here to, like, fade in.
So, let's start with, we'll do size for that one.
Change the target.
And here I'm essentially setting the start point
and the end point of this animation
that I want to have happen with the color block,
and then the interaction is gonna just
automatically animate between them.
Let's test that.
That's looking cool.
Okay, next up.
We'll do opacity for this one.
Then I'm doing the same thing,
but for all of the text content that's inside the hover,
setting that as the start point of zero opacity
and an end point of 100.
But something isn't quite working right.
I know what I did wrong there.
I need to add, because hover overlay
is the class on both of these,
I need to add something different to this one,
make it target that, instead.
(upbeat theme music)
Cool, that's working,
but just like when I did the interaction with my prints,
I need to set an interaction that happens
when I stop hovering on it, as well,
otherwise they're just gonna stay there.
(upbeat theme music)
So, just like I did with the prints,
I'm adding a hover out action
so that basically it reverses exactly what I did.
It's the same thing, it's just in reverse.
(upbeat theme music)
Cool, that's working pretty nicely.
Makes it just a bit fun to like, you know,
scroll around this page and check out the prints.
The last thing I need to add, kind of important,
is the cart, so that if people click to purchase one,
they can actually see it when they are on store home page.
So I come into my symbol and copy these elements.
So, I am pasting that cart in the Menu button
into this page, and then changing the settings
so it sits where I want it to,
which is in the top, right-hand corner,
with a little bit of margin above it.
(upbeat theme music)
I also have to swap out the Menu icon
for a dark one, because this is on a light background.
(upbeat theme music)
This one's obviously gonna be a little bit trickier
on the responsive sizes,
because of this fixed sidebar,
I'm gonna have to do something different, but that's okay.
Let's see how we're lookin'.
For this tablet viewpoint,
I'm gonna keep the sidebar, because I think it works.
It's a little bit tight, but I think it'll be okay.
So, I'm just kind of shrinking some text
to make it feel all right.
(upbeat theme music)
That'll do.
It's a little bit tight, but I'll make it worth it.
There's plenty of tablet sizes.
I do need to make sure that I set that same animation
to happen when you click on an image,
as well as just hover over it,
because we want people to still be able to access
all the details if they're on a touch device.
(upbeat theme music)
So, there we go.
I've set that same animation.
Because it's saved as an animation,
I didn't have to go and create it again.
I've set it to animate in when you click,
as well as when you hover.
So, that should be all the bases covered.
Here's where things get really messy.
This sidebar definitely doesn't work
on a landscape phone screen size.
So, instead, what I've decided to do here,
is take the thing off its fixed status,
just have it be a block of purple sitting up the top,
with all of that intro content in it.
To save some vertical space,
putting the category tags in two columns,
instead of all in one row,
and then the cart in the middle.
And on mobile, definitely having these print images
go 100 percent width, because they look far too small
when they're only 50 percent.
All right, so that's all built.
This is gonna be my store front.
It's a page with the scrolling prints,
and then if you hover over them,
you see the category color come up on top.
I think that's a pretty cool interaction.
And we can click on these to go through
to the category page, as well.
And on here you can swap between the different categories
as you like, and you'll see all of the stuff
that I have available.
Really happy with how this turned out,
especially love the store front page.
I think that's, I don't know,
I think it's pretty cool.
I love the interaction on it,
and I think it's pretty unique, as well.
Like, it's perhaps not something
I would have been able to do if I was just using a template.
Coming up next, in the next video
we're gonna be working on a very important part
of the whole online thing, and that is the cart.
How will people know what they're buying from you
if they don't have a shopping cart?
I'll be taking you through the build of that,
show you how that all works in Webflow Ecommerce.
So, stay tuned for that,
and give this video a thumbs up if you enjoyed it.
If you want to get into Webflow, start trying it out,
for either building a store for yourself or for a client,
and there'll be a link on the screen
and also in the description.
Maybe you can check it out and follow along with me
as we build our cart next time.
All right, thanks for watching,
and I'll see you in the next video, bye.
(upbeat theme music)