Integrating Snipcart with Webflow for Ecommerce - Tutorial

hey there internets pixel geek here with our very first sponsored tutorial yes snip cart was nice enough to sponsor and support our youtube channel so this tutorial is all about how to integrate snip cart into your webflow project now if you're not familiar with snip cart uh here's their website snipcart.com and it is a low code way to add e-commerce to your project whether it be on webflow or any other browser or any other platform and as long as that platform lets you add custom html code to your project then yeah you can add e-commerce to it now one of the biggest features that i see uh of snip cart over the webflow native e-commerce feature is this right here and i think you all will agree customer dashboards so customers can uh easily create their own account inside of your webflow project and see their past order history all right and plus on the flip side for you you'll be able to see that data your customers data and email them about upcoming deals or or send that uh or download all of their email addresses and put it into like a mailchimp or something like that and also there's uh abandoned carts uh and payment gateways like if you have like um if you want to do something that's not paypal or stripe or google pay or apple pay you want to do something different then yeah they support all of these as well okay so authorized.net braintree molly square and other cusp custom payment gateway so a lot of cool things happening with snip cart over webflow e-commerce however there are a few things that webflow e-commerce can do better than snip cart at this moment but right now snip cart being heavily focused on multi-platform platform e-commerce makes sense why they already have all these other features so let's get right into how to install snip cart on your webflow project alright so they have a really nice uh documentation that gets you from from xero to selling products really quickly okay so let's go through the installation together so the first two lines is uh just stuff that needs to be loaded every time a web page in your webflow project is um accessed by your users so you just copy these two lines and this one and put them inside of your webflow custom code area so what i mean is you would go to your project click on custom code and then put those three lines in there that easy step one done all right step two is this line these two lines right here all right so this is uh getting the snip cart magical javascript that makes all the things happen okay and that second line right here your public api key this is where the javascript i'm guessing the javascript will say hey whose account you know whose snip card account are we referencing and so that's where your public api key comes into play and when you sign up for eq when you sign up for snip cart they will give you a public api key and again it's public so it's not really gonna affect anything if i show it to you but here's mine it's really long but yeah even if you copy and paste it nothing nothing will happen all right so um i put those two into the footer code and step two is done that's it so we've enabled snip cart throughout our whole webflow project okay so next step is to add our products okay now we're not going to add products into snip card this is not like shopify where you put products into a platform and then on webflow you reference it no you put everything into webflow you don't put your products into shop a snip cart all right so let's go into the designer let that load and let's pretend this is my e-commerce page this is just my my website it's a single item and this is all i'm selling right so yes this shirt is coming soon but um i'm not selling it yet but let's pretend i am and let's put a simple add to cart button right in this div block okay so how i'm gonna do that is i'm going to go to add elements panel drag dragon embed put that in here and this is where my custom code is gonna go and i can copy that code from here so i'm gonna copy all of this all right go back to webflow paste that all in and now i just have to just replace what's already there so the item id i'm gonna call it pixel geek shirt okay the item price let's say an even twenty dollars and item url i'm just going to leave it as the home page just because you know i only have one item uh let's see the item description let's go ahead and replace that with the very first pixel geek shirt and now we need to get the item image so we need to find the actual address to the image we'll get that soon hold on and then lastly the actual name all right so again i'll just put pixel geek shirt but without the dashes so this id needs dashes but the item name it doesn't need dashes okay so let's go ahead and get our uh item image url i'm gonna save and close let's go to my assets panel and let's go ahead and get this one so i'm going to click on the cog and then copy that link and then go to my double click my html embed and replace this with the actual url that webflow assigns that image save and close cool and let's style this a bit okay let's go ahead and make this div block uh flex so that i can center and center and there we go so we have add to cart all right but notice how this button doesn't really feel like a button right we need to make it make it stand out more so i'm going to double click and let's go ahead and give this a class of um add to cart button all right so we want to give it a a combo class save and close now you notice it doesn't didn't do anything it's because i have to go ahead and drag in a let's see here let's drag in another div block anywhere on the page and start styling this with the same class name add to cart button and let's go ahead and style it let's say the background is going to be white and notice how if i'm changing it here it's also changing down here because they're using the same class name all right so let's go ahead and add some padding let's add padding on the sides more right there so this is all up to you i'm just styling it right now you can say i'm free style oh god no all right so let's go like that and let's make this bold cool add to cart and let's add a hover effect as well just for good measure let's um something like that did that hover work oh it did cool there we go so yeah now i can delete this fake one and we're good to go so we have to add the cart let me publish and let's check out what happened add to cart and there we go oops that was my test one there we go so awesome it worked and i could start selling it that's it and if i'm a user i'm like i want to save my past history order history i can click sign in and register for an account and there you go super simple that's it now you might be thinking okay what if i have a lot more than one what if i have more than one product that's where the webflow collection comes in alright so let's get into that all right so we're back here and let's take a look again at at this look at the code so we need item id and item ids usually have uh usually have no spaces and the the spaces are replaced with dashes that looks similar to a slug so we'll use a slug for that item price we'll use a number field item url again that's the slug but with the collection name as well description could be a text field item image is an image field inside of webflow collections and item name is the name field so you would just need to create these fields inside of a webflow collection which i already have so i've created products a collection name products and here are the collection fields that i've created i have name slug the price a short description a main photo and variant name one invariant or sorry variant one name and variant one options i'll get to those in a second all right but let's go ahead and save collection add a new product and we'll call it pixel geek shirt price twenty dollars and let's go ahead and put in the image okay [Music] put an image there we go short description the very first pixel what pixel geek shirt create there we go cool and let's add my mug so pixel geek mug price let's say it's 10 the very first pixel geek mug put a photo of it there we go and create there we go right so both of them are created now let's go ahead and let's let's put something below this okay we'll say 64. all right so now i'm going to add a collection list so the data will come from the webflow collection okay so let's go ahead and put a collection list right there and we want to connect this to products and now you can see my two products are here the mug and the shirt so let's go ahead and start styling it um let's go ahead and let me put a div in here and make it let's make it a grid and that way you have two columns right there and let's go ahead and drag in an image and pull that image from the main photo alt text is going to be pulled from the name there we go let's style this a bit let's say the width and height are even and we'll set that to cover and each of these collection items they need to be move away from each other there we go all right back on the image and let's give it a rounded corner on the top left say 20. cool and also let's make this 100 actually there we go cool so that's what we have so far now let's go ahead and add the name of it so i'm gonna drag in a div and this one's going to have a text this is going to be name oh everything here needs to be to the left all right so this right here the name should be bold a bit bigger something like that and then i'm going to put in a pair oops i'm going to put in a paragraph that pulls from the short description has some room below let's go ahead and put the price with the text block and i know i'm going a bit fast but this is just adding elements to a webflow collection list all right so there's our price all right now let's get into the real real meat of this of the e-commerce snip cart part all right so let's add add to cart button so i'm going to copy this add to cart button right here paste it here and um let me change the color let's call this let's change this class to dash 2 because i want a second style alright so i'm going to save and close and now that it doesn't have a style it's okay i can just drag in a div block anywhere i want add to cart button and then duplicate this and call this add to cart button two and start styling this let's give it a color of blue with a white there you go and let's move this away all right something like that okay not too flashy but it works okay now if i double click into this embed i've added that to for the new uh style but i need to replace all of these with what's coming out of the webflow collection so i'm going to delete the item id and i'm going to pull from the add field and item id is the slug the price is going to be price all right the item url is going to be the name of the collection so portfolio slash slug and then the description is going to be short description so you see how this works right let me delete this url so this image is going to be main photo and lastly the name is going to be name so yeah so all these purple tags is data coming from a webflow collection right now if i save and close press publish refresh this page there we go we have two items so this is a single non-dynamic uh snip cart button whereas these are dynamic because they're coming from web flow collection so if i click on this add to cart let me delete this one there we go so yeah i can add more quantity this is all being powered by snip card now if i go to continue shopping there we go all right if i click on this super simple i have e-commerce inside of my webflow site using webflow uh collections now the cool thing about this is you can stay on the webflow cms uh site plan which is i think twenty dollars a month whereas uh you would have to pay for webflow e-commerce plan which is around 42 i think i'm not i have to check hold on let me check webflow e-commerce pricing uh let me go here um there we go okay so 29 sorry about that okay yeah it is 42 a month so right there the standard e-commerce is 42 a month uh the snip cart pricing where is it snip cart pricing is uh two percent of your transactions all right so if you sell a hunt and a a hundred dollar painting 100 shirt or something then two dollars cost two dollars per shirt plus a gate payment gateway fee so like a certain i know like stripe does a certain percentage plus a couple of cents on top of that for each transaction so yeah so that's what you're paying through snip cards whereas uh webflow you're paying 42 a month plus um the transaction fee um yeah in addition to any stripe or paypal fee so that's that's the difference right there okay all right back on to this now the next thing i want to show you is what if you have different size shirts what if you have different color mugs um what if you have variants of your products well here's the cool way here's a cool thing about snip cart on how to add it um you don't have to take up extra cms uh uh you don't have to take up cms items yeah you don't have to take up more cms items just for each variant what you can do is right here they give you an example if you want a variant they call it um custom okay so you can have custom one dash name so this is the the variant name and then here the options for the variants and each variant is just uh separated by a pipe right so that's it and if a variant has a extra price on top of it you can just wrap the price with uh square brackets yeah and you can do this with webflow collections so let me show you how so in products in the collection fields i have variant one dash name and variant one dash options all right i know i call it variant here but the code is actually custom but it made more sense to me to call it variant right so there we go i'm going to save collection and go back to my shirt and so my variant name i'm going to call it sizes all right so we have small and then pipe medium pipe large pipe extra large right and that's it save and actually i can do a save and publish right oh no okay save and publish let that go and let me refresh i'm going to add to cart let me delete this one real quick delete delete let's refresh add to cart and it didn't work what happened oh duh i got ahead of myself so right here i need to add that custom one uh name and custom one uh options so i'm gonna go here and just copy these two right here all right so i'm gonna copy these and paste it here okay so i added more stuff and so the custom one name is going to pull from variant name and all of my variant options is going to pull from variant options save and close publish and we're done refresh let me delete that one go back to shopping add to cart there we go we got variants working just like that now the thing about these variants compared to webflow e-commerce is that when you change the variant in the when the user changes the variant in the drop-down the image doesn't change so we cannot set a a image for different variants okay so if i had a blue shirt um i would have another custom variant name and custom variant options but the image will not change all right so that's something that's really cool inside of webflow ecommerce but in snip cart it doesn't have that if you can live without that feature then again snip cart is the way to go okay so that's cool and all let's go ahead and do that again with the uh pixel geek mug so i'm gonna go here to my products go to the mug variant name we're going to call it color and we'll start with orange we have um blue what's called dark blue and then what color is my it's like a teal right ish cyan and we'll just say the the teal one costs extra so i'm going to add extra two dollars to it and then white black all right and now save and oh one more thing i want to do with this i want to make sure that people know that it's two dollars so i'm going to say plus two dollars and i'll show you why soon so i wrapped it with parentheses and the code is going to pick up the uh square brackets all right save publish let's refresh this delete that one go back to shopping add to cart and there we go we have my orange dark and see how this one says uh plus two dollars in parentheses if i click on this that number gets updated so that's now twelve dollars if i click on another color that doesn't have that extra dollar amount the ten uh the twelve dollars becomes ten again all right so that's how you do variance inside of this and it keeps going there's even more things to to do with this again you can add as many variants as you want you would just need to say custom to name custom two options um you can go as far as even adding a gift note you know if you need some sort of um if you if you need some sort of uh text box area you can just say custom one dash name gift note and leave the option variants uh blank all right um or you can do a check box and say gift the name of your check box and then the type would be check box there's so many things you could do with this it's pretty pretty amazing all right so it's a lot of flexibility to your ecommerce experience that you want to give your users okay so now that you've learned how to add products using snip carts low code integrations now it's time to learn how do you make a button that shows your users cart all right so the only way to see a cart right now is to click on add to cart but what if i don't want to add to cart you know i want to just see my cart so let me delete these two right now and what we're going to do is add a cart link at the top right all right of our nav bar so let's go here and um what we can do is uh copy and paste this nav link okay and i'm going to call this cart all right and i'm gonna go to their right here and so how to show a cart button all they want you to do is just add a class name of snip cart checkout so i'm gonna copy that class name go to my webflow project and add a combo class to this one snip card checkout and that's it i've added the cart feature that easy so i'm going to publish refresh the page in what interesting there it is cart click on cart and there we go just by adding a class name i have a cart all right let's take this even further uh let's show how many things and how much my items in my basket are going to cost and how to do that is right here you can show the number of items and how much it costs so i can just copy this class name go to webflow and let's add a uh let's add let's see here yeah let's add a pipe and just say um zero and then another pipe and then um i'll just add another zero okay so for this first zero i'm going to wrap it in a span and then give this span a class name of snip cart item count okay and then for the total price i'm going to copy that class name and wrap this in a span and give that the class name all right so we have total price for that number and items count for that number i'm going to publish refresh and there we go i have my cart with zero items in there let's go ahead and add a mug continue shopping and there we go i have my cart with one item and my cart is worth ten dollars that easy just adding class names right and uh as always you can style this however you want inside of webflow but i think that's pretty cool like i can add another thing and go back to shopping and now my cart has been updated right so a very low code way i've just added a class name all right so that's pretty cool adding the the cart summary and now last last thing i want to show you that's really cool is a simple link where people can go to their customer dashboard so they can see their order history okay so all you have to do is add a class name so let's go ahead and go into my project i'm going to copy and paste one of the nav links and i'm going to push that over to the end so i'm going to push this over all the way here right there i'm going to replace the name the the word contact with um my account go back to the snip cart documentation copy this class name snip cart customer uh sign in paste that in there as a combo class publish and i'm done that's it so i can refresh my account and there we go that's it uh pretty cool okay so that's snip cart and how to integrate snip cart into your webflow project so you don't have to use the webflow ecommerce feature all right um two things to note that i haven't really touched on yet so again the pricing on snip cart is to develop on it it's free forever all right so forever free test development it's kind of like webflow how you get a starter account and you can play around with webflow for free so you can you know kick around the tires see if it works in your workflow and same thing with um snip cart all right the only time you start paying is when you have to pay for the two percent transactions when you're actually selling real products not in a test environment but actually live and what i mean by that is when you go to your dashboard you have two modes you have your test and then you have your live so once you go live then that's when you're gonna start selling stuff for real and you're going to pay that two percent transaction fee plus on this um dashboard which is really really nice is uh you also get to see what orders that come in um any subscriptions that you're selling so yeah they do uh subscription based uh products you can do um you can see what carts have been abandoned you can do recovery campaigns you know get those people who abandon their carts and be like yo are you still interested you probably got some of those amazon um emails when you leave something in your cart like hey you still gonna buy this so you can kind of you can you can do that kind of stuff you can see what customers are in your um that have signed up using the uh you know the sign in register feature create discounts um and sell and even sell digital goods so yeah snip cart uh try it out let me know in the comments how you feel about this tutorial how you feel about snip cart have you already tried snip cart is snip cart already in your webflow project yeah let me know in the comments below but thanks again to the snip cart team for sponsoring our very first youtube sponsored tutorial uh and thank you for watching and as always make the web beautiful together see ya

Channel: pixelgeek

Views: 4,468

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

Id: v6LmdEpjBew

Length: 35min 22sec (2122 seconds)

Published: Thu Nov 19 2020