Udesly 3.0 - Webflow to Shopify - Building & Converting EDITABLE site navigation.

right let's go so navigation build it in webflow convert it to shopify and make it editable this is the video for you let's go okay so navigation so like anything there's always many different ways that we can approach this particular solution problem whatever you want to whatever side of the fence you sit on but one of the main things with this is obviously it's such an important component of a website we have to get it right and it's got to be functional it's got to be editable and it's got to be looking good because people interact with this thing a lot and what i'm going to do is going to take you through the various different tools so i can equip you so that you can make the choice on how best to build your site or for yourself or for your clients the first way we're going to go through is the way that you would find within the udesley university and that is basically utilizing their copy and paste components that leverages shopify's internal navigation system which is really great because you can kind of create navigations and menus and keep them maintained very very easily so let's do that first so first things first all we need is a navigation navbar um again this is not going to be hugely about any form of design so it's going to look like rubbish okay so we have our rough navigation beautiful and now what we need to do is head on over to our university and i'm going to copy and paste the mega menu one now the mega menu one basically has two items in it it's got it well it's got three items it's got a div it's got a link and it's got a drop down and what those do is it's got a custom attribute applied to the div and all you have to do is give a specified handle and then you can then go and create that menu item within shopify and it will pre-populate with anything that you place into it so the the link and the drop down are placeholders so you can style them up and you can bring them across and it'll carry the classes and stuff like that but it won't you're not going to enter any specific text or anything in that because basically that will have you handled dynamically by the menu system so let's copy this mega menu element head on over to our beautifully designed navigation knot and we will just place it into this nav menu area now you see there is two sections here so we have two uh divs so we only need one of them so what we will do is we'll just place that up to here and we will get rid of this map menu and we will just style this a little bit just so it's got a little bit of a few inches later right so that's kind of our first step there so now we just need to edit one more thing and we need to make note of this because you need it so you can kind of link the two together so when we click on the actual menu container you will see that there is a custom div attribute called mega menu and then it's got a value at the moment it's saying menu handle so just change that to the menu handle that you want so for instance for this one we're going to call it top nav hit save so now we have to create a navigation that's labeled top nav and that has that as the slug and then they basically they connect them together and it says yeah you do that and you do that and we're all good cool so that's pretty much that flat portion all right and now what we need to do is just configure our shopify attributes this is not the end of the tutorial this is the groundwork stuff so hang around alrighty and now we need to download our code [Music] head on over to the udesly converter drag and drop the different files if you haven't seen or done this before there's a few other tutorials on this channel that you can reference and we hit up create convert download that file and then we head on over to shopify install so this is a clean stuff i installed so no dramas um so we add up our add our theme file so drag and drop the theme file and um and then you would basically go to your apps and you would upload your json file obviously for the time being there is nothing really here for us to create so it's not going to do much [Music] okay so now basically that would have imported all the data that we need and now let's create that menu so we need to go into our online store head down to navigation and then what we need is to go back to here and make sure that on that menu container if you just copy that value so yet you've got it perfect there's no variation go across go and we just need to say add menu we can add that top nav this is the thing that has to map so it's the slope it's the handle it says yep we're connected and now what you can do is you can add any menu items that you want so let's say we'll go contact and this will go to the contact page there is one yeah there's a contact page and then we also want to add in a thing called collections now here's the cool thing so when we look at that structure we've got a drop down and the menu that's what i talked about so basically the menu uh just the simple link will just turn out is a link but the drop down if you start to nest menu items it will leverage the drop down and it will add those items to the menu which is pretty cool so let's go so we'll create the search clear we'll just say well put it on the home page for now because it's actually not going to be a link and we will say add [Music] give me a mouse and we will then we'll add in another collection list and we'll call this one summer sale [Music] and we will choose a collection so myself and that and now we need to do is just drag and drop that within the collections and it starts to nest them so let's just add another one for giggles and we'll call this one latest and we'll just go and choose another one here and later okay right now we need to do is just have a look at the menu and see what's going on well we haven't published it what it's like uh okay so we're going to here and we will just publish this particular structure [Music] okay so now we can just preview that and you can see we've got our contact and we've got our collections there you go are you happy applaud if you will nothing yeah the main reason being is it looks like rubbish really so the limitations of of it is it's limited so by the very nature of it you you can only utilize the tools with shopify provides in this particular guide so you can't add things like icons and all these kind of cool things without really getting into the into the code and stepping away from the customizability ability thingy but the thing is is that remember it because it's actually really really really useful and i'm going to show you how you can use it in combination with other elements to actually make it really powerful and a lot nicer looking say for instance you wanted to create a footer what you could do then we're going to use flow base again if you don't have flow base it's awesome you click you drag you copy you paste you get stuff it's cool right so let's go into here we will grab a footer this one will do and we'll just pop that one on here cool so now what we need to do is say for instance we wanted to change these now now we've got that handy little link so let's just delete all these footer ones uh we'll delete those ones there and we'll delete well just delete that one completely okay so now we wanted to put in a manageable menu system yep let's use one of those things okay so we'll go into here uh no we will go into here and we will grab this copy menu element so it's the first one it's not the drop-down one it doesn't have any of that stuff but what it does do is it repeats those links so we can copy that we go into here and we will say all right fine we will add a link in there and we'll just copy this particular class put a link we'll say twitter link get rid of that one and we'll call this one here's the thing it's in the product so we'll call it put a product link or something online for the products footer products alrighty so now when we want to do this one here we can get just copy that pop that into there get rid of that and we got footer menu items fine so now the cool thing there is we copy and paste those across we use those custom attributes again so footer products like we did previously and footer menu items and those will automatically get created as you utilize the shopify core menu massive time saving very very cool now before we re-export and i'll show you how that that works again let's do something a little bit cooler with regards to the the actual navigation because quite frankly this is just not going to cut it it's heinous so again i'm going to use flow base because it just really cuts these uh tutorial links down instead of you having to build everything by scratch so we will go back in here premium components we'll go to our navigation and we will choose this one yeah that one looks cool it'll back on over and we will paste in it now brand spanking new navigation get rid of that one don't want that one more and what we might do is just add in a section here just to break it up a bit okay just for placeholder okay so now we've got our new menu and yes it doesn't look the same so you do you i'm just gonna be lazy and do this um because quite frankly i don't want to design it because i'm going to delete it and that will hurt me and i'm not doing that fine okay get rid of you go go away you irritating copy paste things i don't care that the classes are done but you should because the more classes you've got more css and unnecessary css you've got so keep on top of those classes and delete them if you don't use them okay so we have a pretty cool navigation straight off the straight off the bat and uh the cool thing about it is we can use all of the tools and tricks that are in the other videos and will be more videos coming but we can use all those tools and tricks in order to build this navigation what you can use you can use collection items you can use say for instance you wanted to give a list of products you can do that if you wanted to um change these out into different things but you want to be able to add them so use blocks uh anything like from a section thing so if we've got a defined amount of links at the top we've got say for instance we only want to show five and we're not going to allow our clients to break our design too badly they can edit those links and they can change the copy and change the link within it but they can't add extra ones so let's go through and create this so first things first i'm just going to get rid of some of these items because quite frankly you don't want to be here all night and neither do i so we will get rid of those and that one so this one here now these little icons if you see them they're pesky get rid of them and replace them with your own ones and the reason being is those are webflow native so they if you use them you will be linking back to the webflow servers so i'm not sure if you want to do that or not for the time being i'll leave them in there for now but replace them with your own uh okay so this one we're going to say is just going to be a link so we will get rid of the drop down and we will just add in a link link text and we'll call this toggle just so that we utilize that class again just nice but what we are going to do is just get rid of that under ugly underline so get rid of that and there's our class so we'll call this one about uh and that's that now the cool thing is we need to actually make this editable so we're going to use a section in order to do that so what we will do is if you haven't seen this before again there will be a link at the end of the video to the sections which goes into a lot more detail all right so now we need to just give it some stuff that we can configure so we'll just say this one is option text uh we'll go nav one name and then we need to give it a url because it's a link and if you can't click on something then it's not a link uh so yeah so we go here so we got nav so we go option uh url and this will be nav one link cool all right so now if we want to do that again copy and paste it cool now we have two so we can just for clarity code which one can be contact and we change these two two and two so now basically once we've converted this to the section we can change those through the customizer pretty straightforward now drumroll okay so now what we want to do is start editing this particular products section okay so what we're going to do is we're going to do these as like latest products again if you wanted to we can add in our section section tags on here so you keep going through and you can just keep on adding your uh so like option text option text and we call this latest products title that means at any time they want to they can change that to whatever you want uh okay so let's create this little structure then so we've got a platform grid and blah blah blah so what we need now is a little collection wrapper collection list three and what we will do is we'll just double click that add that to our products we're gonna limit them by really want to show two of them and then what we'll do is we'll just copy and paste one of these items into you just yeah get rid of that and now what we can do is just link this up [Music] cool so that's kind of doing what we wanted to do and we can do all sorts of things we want to sort from the latest so to speak so we'll go to a collection wrapper and what we will do is we'll say sort order published on nearest to oldest so now we've got that working right so onto the next bit so what we have here is like a products thing now you would think okay let's use the collections list again and display the collection list here and you would be partly right because you can do that except the image doesn't come across at the moment a nice way to do this would be to use blocks because that gives you complete control over what collections you want to display here and also how many you want to display without having to constantly go back and forth with within the code or re-exporting so let's create the block right so what we need to do is we will get rid of all the bits that we don't think we're going to use and we'll keep something like that so now we need to create the container for the block so block has to be you can only add stuff inside a block not on top of the block so this would be perfect but we can't add a block to that it has to have a div wrapped around it so let's create that quick div so control e div alrighty and then we just need to place that within here now we just need to go and if you're not sure where i'm getting this again from going back over to the uh udesley university and if you go to sections sections and right at the bottom you'll see block so all we need is a block and a block name so we will call this one block and we'll do something kind of something descriptive so you know what it is when you're editing it because when you go into the the back end and the customizer you kind of need to know what you're editing so we're going to call this products which we'll use as a naming convention for that particular thing and we'll call it products products lock save right now we have to right so now we have to connect this up as you would any other section item so we have an image so we'll choose an m so we will literally go here and we'll say custom attribute is option image and we will call this one products nav image okay uh and then we need to do the same stuff for here so we got here we go custom attribute is option text products nav title and the final one will be option text products just nav short this and save okay we're nearly nearly there all right so rough structure's pretty much there we just have to do one last thing and basically again if you haven't seen the shopify sections tutorial we'll go into a bit more detail about this but in order to get sections to work within shopify and this technically is now a section but we need to convert it into a symbol so just click on there and then i find hitting on this little blue tab kind of means that i don't drop down a bit because if i click on here and then i go to try and create it and sometimes it ginger something different so go on to the navigation full right click on the blue little tab create symbol and we'll call this one top navigation cryptic okay so now what we need to do is just let's just publish the site quickly configure our custom attributes it's going to reload and now we can download our exported code okay right so we now just have to download our code hit the download button okay so we head on over to udesly and we just need to just drag and drop our theme configuration again and convert product project download it and then head on over to our trusty shopify store we will [Music] upload okay and we will publish that one and then the final step is just to import that json file and then we'll just quickly do a a quick just whizz around to show you how it all works so now we need to use just head on over to our customizer so what i'm going to show you first is okay so we've got those down here but we can see there's an error saying for the products that's empty populated which are menu items that's pretty much so let's let's do that first so we'll go back in here we'll just copy that particular that particular one here we go navigation and we need to just create our new menu so we just go here and we'll just add in a couple of dummy ones so blah blah and we'll just set home and we will add another one collection save that menu and if we go back into here now we will probably see that store is an issue there that one all righty another menu all right so that's it now we'll just quickly add this one here so we just need to go again we'll just create some dummy ones it doesn't matter at this point obviously you just take a lot more care in terms of what you're putting here [Music] okay that should be that so let's just check that now and there we go so you can see our different links have now added there so really easy now to kind of update and manage that particular section that's where it's important that's where it's useful obviously you can use that same logic up in in one of these kind of drop downs but as you can see those are starting to work as well but we're missing those products there and those also don't have the short description to find within the thing so let's go to tasty wooden chips and tasty steel towels okay so let's go into the products and um [Music] tasty wooden chips [Music] go to more actions edit product meter fields and we can add in our amazing short description done and then we can see if we go back into here now refresh that there's our little short description so all good and now we want to get those products to work so all we need to do now is literally go into our customizer and we will see in here you can see add products to products block cool so we can now go into here and we can say we want to call this one i know bob short description and we will add in a bikini because i uploaded that before and let's add another one [Music] only accepts png's and stuff like that select save and if we refresh this drum roll please cool and as you can see you guys are all all done really now they're only all the last ones were these little doodads at the top so those are pretty simple as you click on that top level navigation structure you did that whole section thing and you can see they are listed here quite conveniently so we can change things like i don't know and then you can actually just change and link them to wherever you want them to to go for instance and it's as simple as that right so that's the tutorial so if you haven't already subscribe and uh if you need any of these little things there's links down below see you in the next one cheers

Channel: AlternatePro

Views: 886

Keywords: webflow to shopify, udesly 3.0, udesly adapter, udesly shopify, udesly webflow to shopify, convert webflow to shopify, web design, udesly docs, web development, webflow to shopify theme, responsive web design, shopify theme, webflow tutorial, shopify theme development, how to integrate shopify with webflow, webflow to shopify udesly, shopify navigation tutorial, shopify navigation dropdown menu, shopify navigation menu, shopify navigation built in webflow

Id: HMqF50AyHHQ

Length: 27min 49sec (1669 seconds)

Published: Wed Sep 29 2021