April 8, 2020
Building a product page | Webflow Ecommerce series – Episode 2

Building a product page | Webflow Ecommerce series – Episode 2

– Hey designers, welcome back to my new online store series where I’m showing you the full process of
building out my online store using Webflow Ecommerce. If you’re like, “Series, what series?” And you missed the first video, then you can go and watch
that in the description, or there will be a link up in the card up there as well. In that video I gave you an introduction to Webflow Ecommerce, showed
you how all the settings work, showed you how to set up products, and custom fields, and things like that. And basically got
everything ready to go with my online store so that today, we can get into the building. We’re gonna start with
building out the product page, and all those custom
fields that I showed you are gonna come into play. If you remember, in that first video I gave you a sneak peek
at some of the designs from my store. This right here is the product page that I’m gonna be building out today. So we’ve got a big colorful background, and that color is actually gonna come from a custom field
related to the category, I’m gonna show you how all that works. We’ve got the images with
your little carousel, we’ve got a shopping cart up there, we’ve got some other
products linked down below. This is gonna be a fun one to build out, so let’s just stop talking about it, and start actually doing it. Let’s dive in. (lighthearted music) Okay, so something I didn’t
show you in the set up video was once you enable Ecommerce, get all the stuff sorted,
if you come into Pages, you can see that now you’re
gonna have some Ecommerce pages showing up. Just like when you
create any CMS collection in Webflow, it makes a template page for items in that collection, so basically whatever
you put in this template, it’ll fill with data from
other collection items, and that’ll be how it’s displayed. So we’ve got our products template, we’ve got our categories template. We also got to check out
an order confirmation here that we’ll get into in future videos. But let’s start with
this products template. And like I was talking about,
with other online stores, you’re often given like, a layout, and there’s customization
you can do in skinning it. With Webflow, you get
a complete blank page which is exciting for a designer. So let’s get started
building up our design, and building out a product
page works just like building out any other page in Webflow where I’m gonna click
on this left panel here to add my element which is like
adding the HTML to the page. I’m gonna start with a section, and you style it using
the right hand panel which is like adding the CSS. I’m gonna make sure I’m using like, good habits throughout building this out. I’m gonna add a class for my product here. And right away I’m gonna show you how I get that colorful background. If I come over to the settings here, I can see that there’s
some dynamic style settings where I can choose to like, fetch an image, fetch a color. I’m gonna get the background color from my color field
within the main category. Then I can show you that if I go through and select a different
item that I know is in a different category,
the color will change. I like working with the pink though, so let’s go back to that. (laughs) I’ll start by building out my navigation, and I’m gonna make this as simple because it’s also used on my category page so it would make sense for you to only build it once, and then reuse it. Okay, it’s voiceover
Charli here to tell you what I’m actually doing
during these sped up parts. And in this bit here,
I’m just adding a block, and adding an image to put my logo in. Increasing the padding
on this nav bar here to give it some space, and
then adding another block to add my menu stuff into. Once you’ve enabled Ecommerce
in your Webflow site, you’re gonna see a new component as well which is a cart. As you saw in my design,
I have the cart up here in the navigation, so
I’m gonna add that in, and get to styling it. Because I’m building the
store within my main website, I can go ahead and use any of the classes that I already have set up, and am using on the rest of the site. So like, for example I
have a little button pass that like, rounds the corners, and makes the text into uppercase,
matches all the rest of the button styles on my site. Here I’m just changing the
colors to match my design, making the button green,
and making the little quantity icon purple. This component comes with a
little shopping cart icon, but I actually wanna
use my own icon for it because I have, like
it more outlined style on my website. So I’m gonna delete this, ’cause I can fully edit this component. And I’m gonna go ahead,
and add an image in. (lighthearted music) There we go, now I’ve got my own little shopping cart icon. Now adding shadow to the button just to give it a bit of depth. I’m gonna make use of the flex box to get my navigation to have both things sitting on either end, so let’s just change it to flex, and add that setting. Here I’m adding a new div
block for my menu button to go in, and just changing
the flex box setting so it sits in the right place. For my menu, I’m gonna make use actually of the fact that I can
copy and paste things from other pages on my site. On my blog, I, if I come into this component here, I’m gonna copy this menu button. Copying things from other pages of my site is really just as simple
as selecting the element, click and Command C,
and click and Command V back on the new page that we’re pasted in. So that’s sort of done
here with my menu button, and the content inside it. And now I’m just editing
the styling to make it match my design sit nicely
with enough space around it. For the contents in inside the menu, basically it’s a div block that I’ve set to be display none. Until you click on the menu button, and then it goes to display block. So that’s what you see me doing here, I’ve got it set to display block so I can see it as I make
all these style edits. I’m putting it into a purple box with slight rounded corners,
and then I’ve got it set up so that on the accordion, if
you click on the menu button, it’ll show the menu. Okay, that’s my menu finished. So I’m gonna save it as a single just in preparation for the future when I wanna use it on some other pages. (typing) Now let’s get into the
fun part of bringing in our product information. So first of all, I’m gonna
make sure that I have my container selected, and I’m gonna add two columns. So it’s a good idea, just when
you’re building out website in general to like, look at your design, and imagine it in blocks ’cause the web is build with blocks. In this first column, let’s add a heading, and I’m gonna choose to
get the text from products from the name field, then it’s gonna have the name and my product there. There’s a little button that shows what category it’s in,
and I also wanna make it a link to my category. So I’m gonna choose to link
it to the main category page, and get the text from
the main category field. And I have a style that
I already used in my blog for topic tags that I’m gonna reuse. Here I’m getting the text field, making that text white. Adding in the price as well, and you can see me
flipping back to Figma here to check out what settings I
had on the type in my design, and then basically just
applying those here in Webflow as well to match the design. And here I’m setting up a new div block in preparation for
adding my image carousel. For these little thumbnails,
I’m gonna get the images from my category. So this first one will be the main image. The image is set as the
background for this box. So I’m changing the settings
here to make the image fill the background, and to not tile so that we’re just seeing the whole image centered in the frame. Then duplicating that,
swapping the background images out for the, the second image, the
third image, et cetera, they’ll all appear here
as little thumbnails. I don’t actually have a fourth image for this product which is why when I set it to get the background image from that field, it shows nothing ’cause there is nothing there. I just wanna use some
conditional visibility on this field, so that
it only even shows up if it is a fourth image available. So I’m gonna set a condition to say if fourth image is set, ’cause
it’s not, it disappears. I think all of my products
have at least three images. So this should be fine for now. Another new item that you’ll see in your elements panel once you’ve enabled Ecommerce in your Webflow store is this Add to cart item which is only available on the product page ’cause that’s gonna be a page you can add something to the cart from. So let’s add this in here. This is like a prepackaged component with Add to cart button,
and also a quantity field so you can like, increase or decrease how many you wanna buy. And just like I did for the cart button that appears up in my top navigation, I’m just adding classes,
and changing the styling of this component to match my design. (lighthearted music) And just like I showed you
with the cart button as well, even though this comes as
like a prepackaged component, I can still edit things inside it. So, I wanna put the quantity and the dropdown selection field I mean, in the same, on the same line. So to do that, I’m gonna
put them both into a div. (typing) I’m gonna set that div to be flex, and they’ll both go next to each other. (lighthearted music) To get this part working where I’ve got this colorful block behind my image, obviously you want that to change color based on the main color as well. So what I’m gonna do is, I’ve got it to fetch the
background color from products. And then I’ll come in here to Background, I’m gonna add like a color
overlay on top essentially, so it’s like it’s got two backgrounds. And let’s make this like, 30% opacity. Now, to bring in my product image, gonna get it to fetch the
image from that field. So to be able to see the
color block behind it, I’ve done something similar on my blog as you can see here, I
had this colorful block behind a blog post. And basically what it’s done is it’s all in a relatively positioned block. This colorful block is positioned absolute, and is like,
shifted to the side a bit. And then white block on top has a higher Z index which
basically controls like, where the layers, things go. So I’m gonna do the same
thing here basically. (lighthearted music) We’ll give the product
image a relative position, and a Z index of three. Then our color block we’re gonna give an absolute position. Ooh, and that just reminded me I need to make it 100%
width, and 100% height, so it goes the, the same size. And then we’re gonna get it to peak out just a little bit by changing
where it’s positioned at the top and the left. And to get this looking right visually in terms of the overlap
that I’ve got going on here. I’m just going to select this whole like, block that I’ve got here. And put a negative margin
on the bottom of it, which kinda makes it be on overlap. Looking good, right? We’re kinda matching our design. This part here isn’t functioning yet, though what I wanted to do is like, if you click on this,
this image shows here. If you click on this, this
image shows here, et cetera. So let’s get that working. But first, I’m gonna actually
add in all the images, and I’m gonna do some
like, show and hide stuff with interactions, so that
when you click on the bottom, the right one shows if it makes sense. (lighthearted music) So here I’m duplicating this main image, and then swapping out the background image so that it fetches the image from all the different image
fields I have set up in my product collection, and in the CMS. And adding causes to it so that I can work with them in a second. (lighthearted music) – Okay, so those images are all in here, they’re just hidden right now, and we’re going to control
when they get shown within an interaction. So over here on my first
thumbnail, I’m gonna add a interaction when you
click, or when you tap on it, and make a new custom animation. (typing) Essentially, what I’m building
for this interaction is, so for every one you click on, it’s gonna make sure
that the one you click on shows, and it’s gonna hide
all of the other ones. So I’ve set the main image
to show in this case, and then let’s set all
the other ones to hide. And that means that no
matter which one is currently showing, if you click on
another one, it’ll disappear. (lighthearted music) So what I’m doing here is going through each one of my thumbnails, and setting the interaction on them to have the correct
image as display block, and all the other images
set to display none. (lighthearted music) Now if I preview this I can show you that, see if I click on each of these, it’ll show me the image that
relates to the thumbnail. And I can see that I need
to add some padding here in my header section. Since this is a link now,
I also wanna make it like, act like a link so I’m
gonna add a hover state to these image thumbnails where once you hover over them, the opacity of the image dims a little bit just so that you know, that you’re aware that it’s doing something. And we’ll also change the
cursor so that it looks like a link too. There we go, that’s much better. Let’s add the footer in
next just because that’s super easy, I’m just
gonna copy and paste it from another page because like I said, I’m building this within
my existing website so I can do that. I’m just gonna copy this whole block here. Come into my product template to make sure the body is selected, click paste, there we go, there’s my footer. If you’re wondering what this bit is, I use ConvertKit forms for my website, obviously I work for
ConvertKit so I’m gonna use that for my email marketing. So this is like the job
script form embedded, so once the site is
published, it’ll show up as my form. Right, let’s work in
this middle section here on adding in the other products. I’m gonna add a new section. To account for the fact that I’ve got this product image overlapping, I’m gonna add a lot of
padding to the top of this bottom section just to like you know, make sure that none of my content in this gets overlapped. I don’t know if you’ve noticed throughout that I haven’t really been
having to do much type styling apart from applying some classes to make it white if it’s
on a colorful background. And that is because let
me just come in here, and show you, I set up a style guide page when I first started
setting up my website, and that’s where I styled
all my headings and things, this is a little style
based on the all H1 style, all H2, whatever. If you set that up at the
very start of your project, it’s really gonna come in
handy for all of the pages that you build, so yeah, that’s what I styling
all of the typers means, so fast for me because
past Charli did that when she first set up
her website. (laughs) Anyway back in here, this
is going to be an H4, and I also have a class that
puts text in the center. In my design above this,
also check out there’s this little line here, and I’m gonna do this
just by making a div, and setting like a 2 pixel height on it. (lighthearted music) So to make this little divider line, I have made a div block. I’m measuring in figure exactly how wide that is, setting that to
be the width of the div, then a couple pixels high. Changing the color of
it to match my design, and also setting the margin to be auto so that it hangs around in the middle. Then I’m gonna come in,
and add a collection list. And the collection that I’m
gonna connect it to is products. I’m gonna set it in three columns. And in the settings, I’m
going to limit the items to only showing three,
and then for the order I’m gonna select random order. So it’s just gonna suggest some random products for each one. I could set it to like, only show ones that are also in this
category, but I don’t really have enough products
to warrant doing that, so random it is. (lighthearted music) As you’ll see, whatever
I add to one div block in this collection list,
it’ll automatically add to all the others
because they’re designed to be all the same. So I’m making the background
gray to match my design, adding a new color here to my palette. Changing the padding of it, adding in a link block
where it’ll include my image so that if you click on
that, it’ll be a link, and then editing the
styling of those images to match my design. Adding a shadow, removing the underline that gets added to all my
links on my site automatically, all that stuff. (lighthearted music) Adding in my type, and connecting that to all the related CMS collection fields, and then adding in a button as well. (lighthearted music) I’m gonna do something with
the color field here too. Just basically finding
any excuse to use it ’cause I think it’s cool. I’m gonna get it for this
button to get the background color from that field. And that way, the color
will match the category that it’s in, adds it’s
like a fun touch, you know? Gonna use my trusty friend, flex box to make these things sit
next to each other nicely. (lighthearted music) And then in my design, I
was doing another little overlappy thing with having the image sort of pop up out of the card. So again, I’m gonna use negative
margin to make that happen. And I also want to
account for that overlap by adding some margin to the top of like, this whole box that’s wrapping it. Then right here is where I realized that if I want these boxes
to be of equal height, I actually shouldn’t use the columns of the CMS collection list here, instead I should set my
own widths to these blocks. That way I can use the
stretch setting in flex box to make all of these
blocks the same height. (lighthearted music) Now we’ve got all of our products in, I’m just gonna make this
button link to you know, the product that it’s meant to, and what else do we need to do? I think we need to do
something a little more fun with these images on hover. So I’m gonna say that if you
hover on this product card, let’s do this, I’m gonna start an
animation to move the image. And so that I don’t have
to set all the details of this interaction up on
every single card here, I’m gonna have it do it for by class, and only children with this class. So that means it’ll only
be things with that class inside this thing that I’m hovering on that will do the action. So we’re gonna get it to
move up ever so slightly when you hover on it. It’s gonna be nice and
smooth, and actually, let’s do that. So there we go, when I
hover, the images go up, but I also need to make them go back down when you stop hovering on them. So un-hover out, we’ll
make a new animation. (lighthearted music) That will make the image go back to zero again, with some nice easing. (lighthearted music) Let’s test that, boom, there we go. So now our images do something cute whenever you hover over this card. You should hopefully draw
some attention to them, get people checking out more prints. Okay, so this is our page. It’s looking pretty much like a design. Now let’s just go through, and check out all the different break points, and see what we need to change. I think that would be alright as it is. This we obviously wanna do something a bit different with. I set these containers up to be like a third of the
width, so that three would fit in a row, so at this point
we’re gonna make them change to 50% width, then this
whole thing, I’m gonna set it to wrap everything. And also, let’s center it. Don’t need quite so much padding here because this thing is now overlapping. On mobile, I think I will center
all of this stuff up here. I think that’ll look good. So I’m just gonna select this container that it’s in. (lighthearted music) So here I’m adding a
class to central text, changing the setting on flex box for the image thumbnails,
adding some more padding. I’m going through to the
lower break point as well, and making these products,
more product cards be 100% width at this point ’cause it’s really too small
to have them only be 50%. (lighthearted music) so we have my finished product page, it’s looking good on all devices. I’ve got my menu, I’ve got
my images switching out which is cool. You can change the quantity
here, and if you want to, you can go see another
product by clicking down here. Something that I just
realized about this products list as well is obviously
I don’t want it to show the product that’s on
the page that we’re on, does that make sense? So I’m gonna come in here to the filters, and I’m gonna say product
is not current product. So now it’s only gonna show me stuff that isn’t there. And just so you can see
how this color is working at the top here as well. This print is in the
screen prints category. The color of that category is set to pink which is why the background’s pink, but if I go to this map, then the background will be purple ’cause for maps, the color is purple. That’s our product page done for now, that was a whole lot of
buildings, so thank you for sticking with me ’til the end here. Hopefully you can see that
working with Ecommerce, and working with products
in it to build this page, it’s just like working with
any other CMS collection, and Webflow where I’m attaching, getting text from this field, getting an image from
this field, or whatever to work with all of the
data about my products. Coming up in the next video, the next thing that we’re
gonna build together is the category page,
and also the storefront which I have some very exciting plans for especially to do with interactions. We touched on a few of
them here in this video, but yeah, got some more big
ideas for the next ones, so stay tuned for that. If you wanna get into Wordflow,
and start building out your own online store, maybe for yourself, or for a client, then there’s a link on
the screen right now, and also in the description
where you can go and do that. Thanks for watching, make sure you give the video a thumbs up if you enjoyed watching
this build process, and I will see you in the next video for building out that category
page, and the storefront. Alright, see you then, bye. (lighthearted music)

16 thoughts on “Building a product page | Webflow Ecommerce series – Episode 2

  1. This is making me want to build my site in Webflow so much haha. Definitely not a priority right now but… πŸ˜‚

  2. Hi Charlie! This is a great video! Watching you build your site from scratch makes me want to learn how to do it myself! I have always used builders like wix or wordpress but would love to learn how to use Weblflow and build things of my own. I am familiar with design software from Adobe but have never used Webflow/Figma at all and am interested in learning. Do you know of any good tutorials I should start with?

  3. Hello there! Do you have a intro to WebFlow video? Like building out a portfolio site or something? I'm wondering if the CMS works well for creating my new portfolio site. Considering transitioning from WordPress.

  4. Great video! Is there a way you could also upload a version without the fast forward? Even if it is 3 times as long, it would be worth it! Now all the fast forward sections aren't 100% clear if you haven't worked with Webflow before (like me).

  5. For the longest time I could never wrap my head around using Webflow’s CMS… but seeing it done w/ eCommerce made it so much easier!! Thank you for this series!

  6. Great work showing what’s possible. I have to point out though :

    That poor keyboard… πŸ˜‚πŸ˜‚ you are the hardest typist ! πŸ˜‚πŸ‘πŸ‘ŠπŸ»πŸ’ͺ

  7. do you have a clone-able version of his on webflow showcase or somewhere .. where we can learn side by side

  8. obviously knowing how to use webflow would be ideal while following your steps especially when you're speeding through steps regardless if you've providing voice over. My background (without coding experience) is in WordPress.

Leave a Reply

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