Getting started with Webflow E-Commerce - Stream Clip

so webflow ecommerce pretty cool thing that you can sell things without having to write a single line of code now there's other products out there like shopify woocommerce uh big commerce and and stuff like that that let you sell stuff make you let you create a website that can sell things without having to code but if you use the power and understand the power of webflow already then building webflow ecommerce store makes total sense but i'm going to get you through the very very basics of this and take your questions if you have any about it so if you're a marketer graph designer someone who doesn't want to start from a blank page totally understand use a free template from webflow to start out with okay and what's good about using a free website template is that if you're on a free webflow account you're limited to two static pages 50 cms items and and that's it okay so you can only make up to two websites but each website only has two static pages and 50 dynamic uh 50 cms items however if you start from a template then you unlock more than that while still on the free starter account plan so i would suggest doing something like this like i'll go to chomp right here it's free click it and you'll you'll see what you get you get a beautiful design already and what you can do is just change all the colors out change the imagery the text whatever you want start from here and click on use for free when that happens you'll get this screen and click on create project okay you can name your project whatever name it whatever and then it'll create the site and boom you're ready to start building and again if you're on a starter plan you only get two pages but this one already has one two three four five six seven so you already have seven pages to work with and e-commerce and you're still on the free plan this if you're still evaluating webflow this is the best way to go because you can mess around with as many things as you can before getting into a paywall all right and what i mean by paywall is before you have to actually have to upgrade your account plan or your site plan right so let's pretend that um this is what i want this is the layout i want and so if you want to change any colors for instance this color right here this is not part of your brand color you can just click on it go down to color right here click on that and if you don't notice this has a triangle all right so what triangle means is it's a global swatch and when you change this color it changes everywhere else on the website that's using that same swatch and so you need to click on the edit button edit swatch and then change this color let's change it to purple and so notice how this element this element this one this one and this one they all change including this one all of them change to a different color because they're all connected to that one global swatch that's what that triangle means so that triangle is just a little itty bitty triangle but it has so much impact across the whole template all right so that's what global swatches does so let's make it purple right there and then i'm going to click save and there we go already i've changed so much even that top bar that announcement bar i've changed that as well with just a couple of seconds all right so that's how you start styling stuff in a template all right if you need to change a image just double click the image and then replace that's all you gotta do okay and for logos like this you would need to double click inside of a symbol double click the image again and just replace that logo okay all right now we scroll down if like you see like graphics in the background you can just click on the section and notice in the styles panel right here we have background shape content now if i click on the eyeball to hide it watch what happens that background goes away alright so you can delete you can remove or hide the background or you can just click on it and change the image to something else okay and even with the free starter plan you can start uploading your own images your own background images you can upload as much uh assets as you want into webflow the starter account plan is free and there is no limitation to how many assets you upload so go at it uh yeah all right so that's those basic things now let's just go straight into more of uh e-commerce stuff like this now if i click on this notice how this tab right here is purple but if i click on like something like this like this text this is blue see that tab it's blue so why is that what is the difference so blue means it's static meaning it's not connected to a database it's not connected to a webflow collection so so when i change that that has no effect on what's coming from the collections or the or for e-commerce coming from the products okay so if i if i click on this notice we have the white and the purple so white or blue so you can see here it's blue here it's blue and white that means it's static but if i click on this it's purple and the tab is purple here as well that means this information is coming from the webflow ecommerce or webflow collections settings all right so if i click on this and i'm like i want to change the name of burger dreams i can't but if i double click on browse our menu yes i can change that so if i want to change a product all of this content right here is being pulled from the webflow e-commerce tab okay so if i click on the shopping cart and go to products this is where all my stuff is so burger dreams is right here that's a massive burger i've never had burger with a fried egg is it good i i've seen it before but i'm like like my stomach just feels ugh just by looking at it anyways if i want to change the name of that i can do so right here and say uh uh burger time i don't know that's a video game name but like burger time and then save it now watch what happens if i go back to the web page there we go it's been changed here so it might seem like it's a roundabout way to change text but it makes sense because you're actually updating a database aka webflow collection okay so uh yeah so you can edit the time the time the the price the description and whatnot that's where all of these items come from so if you want to start changing your your products inside of this free template you can do so by clicking on e-commerce products and go to town you can even select them all so hold on let me zoom in so you can select and then click on this to select them all and delete them you can delete all the the uh pre-created products or you can just go through each one and start editing each one to what you need okay so this is all for basic physical products one of the new things that webflow has created is this feature right here where you can tell webflow what kind of product it is is that a physical one is it digital is it a service or is it just something else okay so all the templates right now because it's a new feature that came after the templates were created all of them are set to advanced but you can set it to physical all right it's up to you whatever you want to do cool so yeah that's a little bit about products inside of webflow and how to quickly get going with a template and before i go to the next part about designing stuff like your add to cart your your checkout pages let me go to the questions let me make sure i'm keeping up a question from the stream timothy are there any subscription alternatives to member stack you can re recommend i'm a fan of course but the catch is i need to receive subscriptions before i can afford member stack [Music] if you want to member gate if you want to pay wall something on your website i only know of member stack that works well with webflow oh and there's another one called uh member space but if you if you don't need a member gate stuff you can use a another platform like patreon uh buy me a coffee.com uh gum road there's a bunch that can do subscriptions so there's that junio this functionality e-commerce already works for brazil uh does good question stripe brazil uh pricing few if stripe works in brazil then yes um yeah you would have to see if let's see here um marketplace is global if strike so the reason why i'm looking at this is because oh it's still in preview so i don't think it'll it'll work okay so webflow e-commerce is built on top of stripe and so when you start collecting uh revenue when you start collecting orders it's actually sending a signal to stripe so that's stripe.com and if stripe doesn't work in your country then you have to wait on it yeah so that's one of the limitations of webflow so currently works in all of these countries right now but if it says preview it means that uh webflow doesn't work on that yet but once stripe announces that hey it's full it's ready to go then it'll work all right so it only works here so sorry brazil all right and so when you're starting up webflow ecommerce it's going to ask you to set up these things like um add a payment provider so if i click on this okay i have to do some other stuff so when you set up your payment provider it's going to ask you to connect to your stripe account all right so let's see here is stripe the only option for payment from nikki stripe is not the only option for payment so what you can do is let me go to the order checkout so yeah we'll move forward so you notice there's this button right here so you can do apple pay but you can also do uh google pay with here all right enable web payments so if i click on there we go so you can you can have people pay by credit card and that goes through stripe or you can have people pay through paypal or google pay or apple pay and they all there you go yeah so you just need to connect those things and you'll be good to go yeah good questions good questions all right so those are questions so far all right so how do we start customizing stuff like this shopping cart so again webflow makes it easy relatively so if i double click my cart i get to this element settings panel and if i open the cart this is just like opening some sort of um some sort of modal all right but this is a special model that lets you add uh products that people have added to their cart and so you can style this however you want all right like taking a text block and start making it bigger with the font like something like that and then pushing let's push the line height oops push the line height to like 26 push it down and so if you're not familiar with webflow collections this is the same thing this is the same exact workflow you have a bunch of your collection list items and when you move one thing you're you're moving them all okay so let me put um item name for the class name and there we go you know we can even make this bigger if we want let's see here i have the width of 60 so let's make that 110 and there we go we've customized it let's give it rounded corners cool let's add some sort of like box shadow to make it come out of the page a little bit more okay and so yeah customize it however you want and remember that purple color that's following us around again it's that swatch it's that swatch that's uh following us around everywhere see that background color is brand and so i've changed that once and it changed it everywhere so if you don't like the cart to be on the right you can have different types you can have a drop down on the left or even a centered modal all right so centered modal it'll look like that on the left on the right or a drop down so yeah and if you want to take it even further which is more advanced you can add webflow interactions to all of this but it's up to you okay so let's go ahead and close that cart and there we go so that's editing the cart now let's go ahead and edit the now let's go ahead and edit this right here i'm gonna click on the cart button and yeah what if if we want this like say want it bigger or wider and let's center no we can't how do we make that shopping cart bigger oh it's an image cart icon how do i make it bigger i can't no huh well you can mess around with that add some random more rounded corners to make it look more like a button you can even change this cart icon by replacing it with another image if you want again it's it's your world it's your call what if i change this like orange okay i can do that yeah i'll just leave it white for now i wonder why i can't change the size hmm and even if you want let's see here cart button what if i want to add a piece of text so i'm adding text inside of there oh okay there we go and i can just say cart and push that to the side yeah see how simple that is i just put a piece of text inside of the cart button and that's and made it say cart and that's it okay all right so that's editing your cart all right and now since we're on the checkout page again i showed you how to change the the web payment of this page either either either apple pay or pay with browser you have that but there's also a part for um checking out for paypal okay so yeah this is oh let me go back to order page wait oh okay okay cool so we're on the checkout page and webflow already gives you all of the form fields that you need all the basic form fields that you need to start selling your stuff including this sticky sidebar one of the things um i like to see as a consumer is to see my items right see so these order items stuff i'm about to buy right above the the price so what i can do is i can take this order items and put it above the order detail the order detail being this sidebar so i'm going to drag order items above order detail and there we go i see this right here oop okay i i want both of these i want both of these to stick so let's see here what can i do okay so this order detail has sticky so i'm going to delete that wrap both of these in a div just just like this wrap both of them in a div and make this sticky so that way they both stick to the top and again try doing this without code try it i mean actually try doing this with code okay move it down a bit something like this and there we go so both of them stick with me so as i'm as i'm moving down this page i want to continually be reminded of what i'm about to buy which is a burger and two drinks pretty good all right and you can customize the look and feel of each of these and say you want even more information from your customer before they pay so there are there are ways to get three additional form fields which is right here in the ad panel i can just drag this in to right under web payments i can drag that in and there we go i can get more information and these are just suggestions it doesn't have to be a telephone number i've used this for like um yeah i've used this for other things like this check box right here could be for something else this notes right here could be something else this is it's up to you webflow gives you three more fields if you need more than three for additional information no you can't do that that's the limitation and yeah you can't do that but you get three okay all right um so that's how to customize this what's next um the order confirmation and the order confirmation is it looks just like the other page is just confirming you know after they pay here's all information cool and lastly you want to send that customer an email so you would go to settings email and you would set up the look and feel of your email now you can't completely customize the layout of this but you can do some things like the background color the accent color you can change the text of some of these things so you can change the email you can change the email subject line you can change the greeting message for people who are downloading um digital a digital product you can customize that yeah there's a lot of things to play with inside of webflow ecommerce so this is this stream is just the very very bare minimum basics of if you are just getting started where do you start get a free template on a starter free account do not buy anything until you feel comfortable editing all this stuff and once you've got your text your images your products all of that inside of webflow the way you like it then upgrade the site plan to the e-commerce to the e-commerce site plan and that way you'll gain even more functionality more uh options to do more with your site and you can also launch it live on your custom domain name okay so i know that was a very very quick but yeah if you have any questions let's take them now um be right back i need to get a drink of water so get your questions in the live stream chat so see in about 30 seconds let me play some music real quick [Music] okay cool you're back [Music] hello [Music] oh okay it was kind of it's kind of dying there but we're good all right let me get the questions so nikki i've already answered that one is the stripe the only option for payment uh no paypal stripe apple pay google pay bca give some information on shipment uh yeah yes yes yes um hold on hold on i have to set up um like webflow asks you for address so i had to set that up real quick shipment okay so inside of the webflow settings panel so your settings e-commerce you have this shipping right here so you can set your shipping zone okay so it's set to united states for now but you can click on edit countries and you can set it for whichever country all right and you can do different shipping methods like what if i want to do a flat rate percentage base price based quantity based weight base like you can add as many you can add as many as you want and rate amounts let's say oh enter a number greater than zero okay how about five dollars flat rate or i can set it as free yeah save cool and then i can add a new method saying if you if you buy 50 50 items or more so if you buy like 50 items or more oh wait max quantity 50 no minimum quantity 50. then it's free shipping you know and then there you go so you can add as many different types of shipping methods as you want and you can also do it based on per country okay so yeah pretty cool stuff and you can set up your taxes uh so if you have a vat or taxes um it is set up here uh yes and notifications like you can have notifications sent to people or additional email recipients if you're like someone bought something yay i want to send an email to um myself my boss and my colleagues and maybe the shipping director or something like that the logistics director something like that um so you can send them all an email automatically once an order is received all right um yeah cool all right um oh new feature yeah variants cool uh digital downloads yeah yeah uh let's see here do we have variants inside of this oh please where's the okay option sets uh okay okay so inside of webflow ecommerce you also have options okay or what we call variants and what these are good for is things like clothes shoes or anything that has a variant so for example like a shirt that's a product but what are the variants sizes small medium large extra large extra extra large extra medium so i can do that like let's pretend this is a shirt even though this is for a drink fig and lime um okay we can we'll pretend it's a shirt so we'll just say like give that a category name of size or size there we go and then we have to set our options so we have like small medium extra medium and large okay so we have those and every time i add one webflow is adding a variant of each one and with each variant you can change the the image of the variant you can change the price you can change so much of it okay and i'm going to save that and then there you go so let me go to the drink fig and lime page okay let me look for fig and there we go and so you if you noticed uh this has the the options or the variance so their size but if i go to something else that variant is gone okay because this one doesn't have it so webflow adds that drop down menu pretty cool super simple i didn't have to code a thing however a lot of people in the community were like that's cool and all but like i want to make some sort of like button i don't want to drop down can i do something that's not a drop down and the answer for a long time was no but we'll get to it well they got to it so here's how to play around with that so uh if you look here and i clicked on the element settings there is no way to style this okay there is no way to not use a drop down menu so what you need to do is take this element at the cart and delete it and then add another add to cart again and now we have a lot of options okay so what we did was we had to delete the old code because again this pro this uh this template was created before the the new feature was added so we had to delete that old code and put in a new one so now that we're in the new one watch what happens if i click on the options list right here and then go to the option settings remember we only had pre-select default variant well now we have variant selector now we can say a select field or buttons and there we go all right so watch again let me go back let me undo everything okay so this is the old add to cart and if i click on options list it only says pre-select default variant to enable the new version you have to delete the old add to cart and add the new one and then if i click on this select field sorry if i click on option list right here i get pre-select variant and i can select buttons and there you go so that's the difference okay and with this button i can just take this and say uh let's let's make a pill okay let's make a pill type of thing just for fun all right so excuse me let me call this variant button so when i click set that as a variable button all of these have that same class name okay so as you can see i set it once it sets it for all of them cool now let's play around with the first one so i'm going to click on the down arrow here and say for the first item okay so notice how it says first item up here for the first item let's make the rounded corners just for the top left and bottom left we'll say that one is 15. okay and then for this one right here let's go to last item and set this to 15. okay and then with all of these let's see here there we go for all of these variant buttons let's remove that margin right so they're right next to each other okay do negative one and if i preview there we go and i can also play around with the hover effects as well so yeah this way you have more control over the style i mean it doesn't have to be a doesn't have to be like a button button you can make it a circle like imagine if you had colors right um yeah let's make colors actually rather than just saying it let me just make it right now so say we have that option set and let's do colors let's just say black and then white okay done save and there we go we have black and white but can i make this a different get back okay so i need to make a background color so if you made a background color field you can connect it to but i don't have one yet but you see what i mean let me do a hover effect with these real quick uh we'll do purple and white with a preview and there we go cool cool all right so that's one of the bigger new features for wevley ecommerce that was updated

Channel: pixelgeek

Views: 1,267

Keywords: webflow, web design tutorial, webflow tutorial, graphic design, web development, pixelgeek, pixel geek, webflow ecommerce, web design, webflow tutorial 2020, ecommerce

Id: aF6K4fZMjp4

Length: 39min 4sec (2344 seconds)

Published: Tue Oct 27 2020