April 10, 2020
Building a store front & category page | Webflow Ecommerce series – Episode 3

Building a store front & category page | Webflow Ecommerce series – Episode 3

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

9 thoughts on “Building a store front & category page | Webflow Ecommerce series – Episode 3

  1. Those interactions are amazing! And I love how easy they are to do – I would have NO idea how to code that but it looks super easy to do in Webflow!

  2. the price is HUGE compared to everything else. Prices should never be so big in size and so noticeable. That's the general idea for any store no matter digital or real one.

  3. I'm currently building an ecommerce shop for a client in Webflow as well, it's been so much more enjoyable than having to mess around with Woocommerce! I think Webflow Ecommerce is launching fully around the 18th as they're doing a livestream on all the new features! Loving the design and the series so far Charli!

  4. I'm enjoying the series so far, and love the shop layout you've come up with – it definitely avoids the cliches! If I had one criticism it's that I feel like the landscape print doesn't work quite as well as the portrait ones on the little product cards but that's really minor in the grand scheme of things. Looking forward to watching the rest of the series. 🙂

  5. I work at an e-commerce startup and I cannot wait for this to be ready to launch so I can try and convince the team to get our clients off of Shopify. There we have to hire a developer, an SEO specialist, sign up for app after app and there's glitches. Such a drain on my time and so limited.

  6. Nice work Charli, love the design, one quick fellow Webflow pro builder tip, just duplicate your first (hover in) animation and reuse it for hover out (or click) out, just give it a new name and reverse the animation settings, save all that building from scratch twice! 😀

  7. I was wondering how many hours you spent in Webflow for this particular page design? I have been really enjoying these videos as they do a great job at of how to use the platform. Thanks and keep up the good work!

Leave a Reply

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