Udesly 3.0 beta - Webflow to Shopify - Converting product pages

hello and welcome so this particular tutorial is going to be around beginning to get your webflow created product pages over into shopify using your desi 3.0 later now given the size that product pages can be and the multiple different types of modules and different things that can can make up a a product page i'm just going to focus on that first section and then i'll break down into different tutorials for the other remaining pieces mainly because i don't think you want to listen to me for that long so to start what we're going to be looking at is some getting like the product galleries working as well as just kind of some basic uh product details that we can display correctly that you would see typically on 99 of product pages around the web now if you're a new viewer or you haven't done so before please like and subscribe to this video if you find them useful it really helps me out and uh yeah big thanks for me if you do okay let's get started with the tutorial and like we did last time we're going to start with a blank template and the reason why it's blank and we're not going to do uh here's something i did earlier is because i want you to see the step-by-step process i want you to be able to take what i'm teaching you here and put it into your own products this isn't about a design contest this isn't me trying to show how beautiful design is this is showing you the nuts and bolts of what you need to do in order to get that successful con conversion between webflow and shopify okay so first thing first we're going to add some product variant images and you're going to ask me why and i'm going to tell you that a little bit later but right now just do it okay so we're going to go into here products uh we'll check the first one we'll go down to here we will select the product variant and i'm just going to drag these images in they were created a bit earlier all right let me save that job done okay next thing's next we need to start creating the structure of the the top page so we're just going to use our shortcut ctrl e we type in section then we're going to control e again we're going to type in div we'll give those to our classes so if you're not sure where these classes are coming from i covered these off in previous tutorials and basically they're just very very stripped back css classes they can be anything you want again don't get bogged down in the css or the structure of the page this is just the nuts and bolts you can design this how you want it's just when you add in certain elements and you wanted to do something else you wanted to convert specifically then pay a bit more attention to those particular sections so we're going to add in a content wrapper class and that is that so now we want to create this kind of grid top level grid section and uh i like to use css grid again you can do it how you want if you wanted to use columns for instance i like css grid because it's just really easy from a responsive point of view that's that's it okay so it's added a div and then we're going to give this a bit of css so we'll call this thing product good top okay and then we'll just give this a flex that's fine or we'll get rid of that auto at the bottom and then we're going to go in here we're going to give it a 100 and that is that now we just need some stuff to nest our content in so we'll do a div we'll just copy and paste that so we have two one and two this is going to be where we place our imagery and this is where we're going to place our normal stuff that you would see in the product page okay so let's start off with product price and what we'll do is we'll group group them within a uh in a div so we can kind of control the way we display them so we're going to add in a text block we'll move that up into the div and we'll copy and paste it once so this first one is going to be our price so again if you're not knowing where this css class has come from it's previous tutorial you can call this anything you want and it just gives you the styling ability on the thing it doesn't do anything to do with the design conversion it's purely just the css styling it's not a prerequisite for the conversion and the same with this one compare price okay compare price just has a bit of extra styling on it just to kind of do it now all you need to do to get the price and the compare price to to work in the conversion is go into your dynamic settings get text from field and choose the price and choose the compare price job done okay next one we want to add let's say sku and the product vendor so you would think you'd do it the same way but you don't because there's certain fields within webflow that don't convert to shopify they have to be mapped with using custom attributes and to find the custom attributes you go to the udesley university we click on the shopify thing and we scroll down to products and on here you have all the different products the custom attributes that you can apply to a product pretty straightforward so we're looking for this sku so we can either copy the element or we can use the custom attributes we're going to do the custom attributes way just because i want to show you how that kind of works just to make sure that you completely get it so we'll add another text block [Music] okay and what we will do is we're going to just say this is an sku brackets and interesting number let's just correct that sku and then what we're going to do is we're going to wrap this with a span you don't have to wrap it with span you can just drop in a text block or a div or something i can apply the custom attribute to it i just do it this way because it keeps it all kind of together right so we'll select the text span and then we're just going to go to the custom attributes and then go back to the udesley university and we can see this is product sku we'll copy the product one just by clicking it you can see it's copied to the clipboard go across paste it there and type in sku which again you could just go back and copy it and paste it but it's three letters you don't need to just type it three letters okay save job done so now we can just add a little bit of styling to that if we want so we'll just go to here we'll say it's bold ooh pretty not really it's aerial but i'm not changing the font okay next one else we want to do the vendor so we can just copy this particular thing again we can change that to let's say made by and we need to change this text span make sure you have the text band selected okay and then you guess that we go back to here and if you find something called vendor you can just click that vendor and then go back to our custom attributes paste vendor job done okay next what we want is we want a name a product name so we will go into here uh we're going to here sorry and we'll just choose a heading and we'll move that into our container block so we'll just move that and get that into there and this is quite simply you just select from the drop down and choose name there we go alright so now you want to add a product description and you can do multiple things with this and sometimes what i do is i create a a custom field called short description so kind of going into products and going into here and you create a custom field do it thing you call it short description and multi-line save close yes i want to save the changes and then i can literally go here and i can choose the short description meter field there and that would load it up and basically what that process does by adding those custom fields it creates product meter fields that can be used to store additional data that shopify doesn't normally support without a meter field for this particular example though we're not going to do the short description we're going to use the description now the difference being and the reason why i do the sort description from time to time is sometimes customers or clients of mine have lots of content that want to say about a product and they want to utilize the the description field within a specific product so this area here in order to add product information now this is a wysiwyg editor so it's pretty useful so you can do things like bullet points and tables and images and add videos etc so it's good to have that in a position of a page that isn't going to be so um visible on the first on the first thing just from a purely aesthetic point of view uh if you want that in your if you want that in the top page then fine but i tell you what to do is i ended up putting this particular description field into like a products details section or something like that and then i call that field so for the placeholder i use a short description which would go there but for now we're just going to use description and uh we'll move on right the next thing you would normally see on a cust on a e-commerce page would be the button that allows you to buy something otherwise be pretty pointless so what we will do is we'll add in a add to cart okay and there you go now for this particular tutorial i'm going to duplicate and do two add to carts and the reason being is i want to show you how you can get the different ui um coming across so with regards to the option list you you have two two uis you have the select version which is a drop down or the buttons at the moment you can only ever get the buttons out unless you add a custom attribute so if i wanted to use the select one which to be honest comes in quite handy with specifically with with clients who have lots and lots of product options which can cause problems with the with how this is displayed on mobile or smaller devices so if you wanted to get this and to be displaying the drop down and i'm just going to duplicate this we just go to the add to cart and we just need to add a custom attribute called force select save done so even though this is now a button it's still going to be a drop down so but for the for uh to make it so it's not at all confusing we are just going to select the option list again go back in here and we're going to say it select so this one here will now convert to select field so drop down and this one will convert as buttons again you can tweak the css make it look however you want it to and it will come across no problems but without adding that force select on the opt on the add to cart here it will always default to the button okay right so that's pretty much that from a uh a core structure point of view now we're going to get onto product images so product images there's two ways of doing it the the way that i prefer is utilizing what you desley have done in terms of leveraging the cms items and kind of packaging that up and exporting that into the relevant code and it gives you a really easy way of visually designing the site without having to make any guesswork the second way is more for people who have been a little bit eagle-eyed and looking at the change log and they're seeing something called product equals sorry product equals images or product equals image and then you have another one that says offset and index and what those do if you're really interested is allows you to specify to the udesley application to not use the their new way of doing it and utilizing shopify's default way of doing it so this could be come in handy if you're trying to debug and figure out why a third-party application is not working with a product gallery or for instance i find at the moment though the easiest way to do it is to still use the cms and still kind of link in with those particular things and there's one little tweak to code which i'll get into a little bit later with regarding more images but it is very very simple and easy to do so we're going to do that way first and then i'll show you how to do the second one and go from there so when we go to add images you can do multiple different things you can either add it into a slider a image gallery i like lightbox i'm going to do lightbox now um but again you can pretty much do whatever you anything you want with regards to this you just have to use your the cms to link it so here we go so let's use a light box and light box and we'll give this light box a little bit of styling so we will say it needs to be 100 width we want it to be 600 pixels high and then our image needs to be 100 width and 100 high and we want it to be a cover so that it all looks nice okay so the first way to do this is to literally just first you got to click on the light box link go to here select media and select main image now you'll see that it doesn't change the main image and the the main reason for that is you still need to specify it here there we go so now that's working perfectly okay and so when you click on one of these option labels this image will update with the product variant for instance um and the the main image that you that you that you assign to a product variant now we want to basically add a product grid below this so what we will do is we will add in a collection list okay um collection list we will give this a little bit of margin just so it looks consistent okay and we will link it to more images all right and it will say this collection does not contain anything so i'm going to just drop to something that we did earlier this one here and you'll see that the the images that we added earlier on start to come through okay so now we got something to play with and something to start with so let's go into the collection list and we'll just create a lovely little grid job done and now we need to add in a another light box so that we can get that to work as well so we'll just go back into here and we will choose our light box and again we just need to apply some styling just to get it to fill the space correctly so 100 100 percent well we'll do this as a 250 maybe and we will give this 100 and 100 percent okay and then we just need to set it as a cover as well so that we keep the cons the proportions of the image so to speak so that's looking good so now we just need to link it all up so you guessed it we go here we get first on the light box link there's two places we need to do it we select more images second place and we get it and we get more images from there and we are now fully linked up so we go like ah it's not linked up so we want it to be linked up because basically we don't want to have a light box that only works within one thing so the cool thing about what what webflow does is it allows you to link with other light boxes so if we type here and we just type in i don't know we can call this anything we want but i'll call it products and i'll copy that and then i go down to this light box here again and i say link with lightbox again and paste now when we go to click on the different images you'll see they're all linked at the bottom which is really really handy and just makes common sense cool so that's that now one of the things that you will you'll see that in webflow it's pulling in this more more images thing so it's not referencing this primary featured image when you convert this to shopify at the moment it is probably going to get changed i've asked you desi to to tweak it to see if we can get the offset feature to work which and if you talk what i'm talking about is if you go into the custom attributes and you go down to the linked item you would type something like offset one and then hit that as a save then what it would do is it would remove the first item and the reason being as well as kind of getting to is that when you convert this it will reference all the product images when it's not a variant image and it will place them into here but it will include the first image which you don't want because you've got the first image where you're displaying so it sounds a bit complicated and confusing but it's not so uh and you'll kind of understand why when i when i show you the examples so why have i done it this way in terms of using collection item and the more images well what this is doing and it's really quite cool what what you desiree have done is is when you create this collection list item in reference to more images firstly it will do a check and say is there product variant images the ones that are very specific to the specific variant if so it will remove any images that are additional in this media section so it doesn't matter how many images you have there and it will just show the ones that are relevant to the product variant if there isn't a product image product variant image it will display the images within the media field so very useful and the great thing about it is it does that for you so you don't have to code that it's just done so um anyway so if you do this looks looks good and we are good to go one thing you will notice though is if we go to the empty state you'll see that it comes up with this no items found now obviously if you've got that present within within the cms here it's going to come across to shopify and we don't want that so what we do is we just get rid of this we'll go down we'll select the color we'll make it white make it transparent and we will give this a height of 0 and a width of 0. the reason why i do that is so that there's no size attributed to that module so you don't get any layout shift happening and then we hide it so now it's gone so now if we go to one that does if i turn the ui state back to items we see it there and if i go to a product that doesn't have things it's gone all right so that's that and now i mentioned do something about the the new product images custom attribute now if you wanted to use that for whatever reason you can do this you can add it to a div you can add it to a slider you can add it to a light box you can add it to whatever you want really um from as long as it supports image attributes so it will do this with an image so if i was to create that and i go let's just pop it here for the time being and i wanted to display a image or one image the product image so to speak i would just go to the custom attributes and i would type product image and save and that will just show it will go and it'll create the a for loop and i'll just say show me that image if i say and add another one saying index five it will go through that and we'll pull back five images straightforward if you go into here and you change that to images and get rid of the index five it will now pull in all of the media images that you've put into your shopify page so we'll pull in all of those and then you can use quite handily offset parameter by one two three four which will then say give me the images but not the first one if you set one or two or whatever you've done and that's really useful so and i'm hoping that this offset one will start to or this offset custom attribute will work with collection lists and as i said i've put this as a support question through to you desley and hopefully they can implement it but for the time being i'm going to show you how to get around that okay so there you go so that's pretty much that for from a structure point of view now what we can do just like an added benefit we can add in a video module now video 3d models and all this type of stuff is all possible but that you need to do it through a custom attribute and not through what you would expect is kind of like i want to add a video and click on this video module it won't work so what we need to do is we go back to our udesley university and we scroll down and you can see something called external and video and what these do is the external video goes to an external video like youtube and video it does an embedded one so if you go and you added a video using this one here it would add the video through that and it would store it in your media files and upload it to your shopify account so to speak or you can go from here and you can go embed video and then you can add in a youtube url specifically to reference that i'm going to do the embedded one and i'm going to do a shameless plug and i'm going to copy and paste one of my urls but so what we need to do is go to our thing we're going to copy this external video and you can see what this is saying is this requires custom css scary no it's not you basically have to do one thing and that's basically the problem is when you copy this across it uh creates a div and you think okay that div is cool that's going to give me the space and that's going to be where my video is going to go yes or no it it creates a container which then loads an iframe within it and what ends up happening is let me quickly paste this in and i'll show you so what ends up happening is it creates this little container and then an iframe loads in but the iframe and the content will only be a very small section so if this is the the container of the video very nice your video will be up here and we want it to be full frame so what we have to do is add in a little bit of custom css but because the iframe doesn't come across with any definable classes we have to target the html element now it sounds complicated but it's not because it's an iframe we target iframe so let's just do a little bit of tightening up then so we get that let's just give it a 16 pixels to kind of keep the deformity of the grid this we're going to call video contain product video or product video container [Music] can be anything you want and that is that so let's just go we'll say it's 400 high okay so that's all good and we'll uh let's just we'll give it a bit of a background color so we can see it uh we'll say that it's got six orders and if we do that we want to cut out the elements on the inside so we will set overflow to hidden okay and the reason why overflow's a hidden is because as i said it's going to load a container it's going to load our iframe inside the container so if you set overflow to hidden we get the rounded borders if we didn't we wouldn't get the rounded borders okay right so that's that now you can see here when we go into custom attribute you can see it says product equals external video so all good to go but now what we want to do is what happens if there isn't an external video we would constantly have this particular thing which would be rather irritating so what we can do is we can add something that's quite cool which is called conditionals and you can see these conditions over here and these are extremely powerful in creating flexible templates that you can switch things on and off so it doesn't mean you don't have to create a new product template a new product table and a new product template just to support a new feature set so features and benefits spec sheets videos um so what we want to do is we want to create a meter field so a custom field that we can then drive the conditional based on it so easily easily done so we go over to our products let's go into here scroll down to our custom fields and we'll add a new one and we will say it is a switch and we'll say call it show video okay now if you use the legacy version of udesley you would have had to leverage a meter fields guru or something on the lines of that and basically what this process is doing is it's replacing that requirement for needing that custom meter fields editor uh since shopify 2.0 is launched as well the reliance on on uh product meta field kind of applications is diminished because they're now inhabiting that natively however the udesly app does a really great job of creating and helping you kind of build those conditions without having to really dig deep into the code there is obviously some limitations there's you can only have 30 fields but what you can do and i will do a separate tutorial on this is you can create like maybe a handful of the ones that you need for like say for instance feature one to feature two feature three feature four and then just swap those out with other meter fields later on easily enough anyway so what we've got here is we've got our two conditions two things we've got a short description in our show video we just need that show video for the time being so we'll save that collection and what we will see is if we go into our product again sorry uh we'll go into our products we'll choose our unbranded one and we will say that we want to show the video save okay close that now what we want to do is we want to add a condition to this so we just literally go down and we choose let's say where is it gone where are you hiding show video and we say show video is on good all right so we can see it's there but now if we go to another product it's not there and the cool thing about those conditions is that basically because it's happening on a server side point of view it won't render that module uh within the front end so you get no drawback of having those things with the present in with your template because they won't be displayed based on the server-side language portion so that it never gets to the front end so you get no issues with page speed good job you desley okay so there we have it we have our video and that should all be good to go right so the next thing we need to do is add that custom css that it scaredly references but it's not so it's that little bit we want our video to be that full width and height so we need to be targeting that iframe now you can do it in two places the first one is you can do it with it just as with an embed code so in embed and you could add it there and you could put this particular snippet into that but because why you would do it in here is normally because you want to see the css changes happen on the page while you're designing so for instance you wanted to do some convoluted gradient texture or whatever it is or you wanted to customize whatever you would see it happening in the browser but because we're not going to see that within here because this is loading an external resource once it's published to shopify we just need to have that code present so that uh it works and we don't really want it bogging down or being in here so let's do it the other another way so we go into products click on the little template so this is a pages template and we scroll down to our head tag and all we need to do is add in our style tags so open and close it style and then within here we need to type in iframe open close curly brackets give it a couple of spaces i'd like to tab it in just from a makes it easier to read and we're going to say width is 100 percent and height is 100 percent i feel like i'm in the matrix now that's it there's nothing more complicated to it so now all it's doing is it's saying that everything that's labeled iframe that has an iframe tag that has iframe while in this particular page needs to be 100 width and height easy that also is relatively looking in case you ever use other iframes because they'll just be set at 100 with the knight then you just create and control their height based on their video conte on their container which is much easier okay so now we're done and what we need to do now is add in our custom attributes so we literally go up here we choose our custom attributes again if you're not seeing this kind of awesome job type of thing and it's giving you an error just wait a little bit longer or refresh the page or you know publish the page and it will work okay that's that so now we're going to need to export the code okay and we download it and we have our two files that we need to do the conversion so we head on over to our udesley app we drag and drop our zip file in there and we need to select the theme configuration it's going to be the top one always and hit convert conversion is going to run and we need to hit download make sure that you have the the the udesy app installed on your shopify store if you haven't done so already and you just literally click on that and just add the app it's the only way to get to it for now so don't try and search for it within shopify okay so we have our files let's head on over to shopify and we'll go to our online store we'll leave that page okay and we'll go down and we'll just upload our new template and once that's finished doing it we will publish the page just so it's done and then we just need to drag and drop our json file into the webflow importer okay oh my bad drag and drop into the webflow importer it'll start syncing all the data and this creates those meter fields that we were talking about those custom attributes those custom fields that you created in webflow and creates those into the shopify meter fields that can be used um and there's a specific place where you can edit them specifically that you need to know if you're trying to add variant images which we'll show in a second and also enabling and toggling on that video okay so that's all done so let's go and tweak some of our products and we just make sure that we have those bits in so if we look at our product so let's say we'll add this one we'll add a video to this one so i'm just going to grab a a youtube video shameless plug so we'll grab that and we will go in and we've got that kind of copied and pasted so now we have this handmade tile blah blah blah so this has got product variants so we'll have a look at that in a second but first things first let's just turn on that video module so we know that we can see it and you can see basically what i did there if you missed it so i'll go back is you have this more actions area and this is how you access the udesley shopified meter fields you can add these through the through through the meter fields in the settings here but you lose some of the cool custom abilities that the web flow uh that the webflow app provides and that's like things like adding them adding and deleting the imagery and stuff like that so for best case at the moment just to still use their app okay so we'll go back into that one and we'll say edit product meter fields and you'll see here it says show video so we will show video and then if i wanted to add that short description that's where i would add the short description that i talked about earlier but we're not going to because we didn't use it okay so that's done so now it will show a video so that module is now present all right so let's go back to our products and we want to add in that video so we'll go down click this drop down add embed video copy and paste that and then the video should display shortly imagine we scroll down you'll see that the video has been added to the to the thing okay so that's that now what i want to show you is the per product variant images and this is the the something that's kind of important so if we open one of the variants you will see that if you go into here i'm going to right click this and open in new tab so i can jump backwards and forwards so you'll see this thing here it says more images file source file source so if we delete those for instance and this is again this is why you utilize the udesley webflow importer to manage the the the meter fields and not the native meter fields editor that webflow provides is because you have this additional ui elements so let's add an image so this would be specific image for the specific variant so we can add let's say two and then where you go to add the images if you go down to settings just right clicking opening it for easy and copy and paste and then you go and you find files and then you're given all the images and you can upload as many as you want and you're given the the image that you can copy paste so we'll just copy this link by clicking the icon we'll go across we'll paste that there and then we'll copy this one too and we'll go across and we'll paste that one there easy peasy then just enter your alt tags and hit update okay you can create as many of those as you want really we haven't given any limitations within our template it will just keep creating them in the grid that's why it's quite nice to use grid because it auto flows really nicely okay so that's that so now let's actually have a look at these products and see what they look like so the first one is the normal product non-variant and you can see that okay yes i've got the two two of those there and only one is relevant so you would only ever have one just again so uh but you can add your quality add your cart etc etc and you're good we've got all of the items that are displaying correctly that's one hell of a discount we've got the sku and we've got the vendor showing and we've got the name coming through it doesn't have a product description so we'll need to add a product description within the products so if we go into here and we were to add in a product description here and save and then if we go back to this page and refresh it we'll see our description should show and then we can see our description shows okay so now everything's looking good but we can see that this this is what i was saying so the the first image within that grid is the same image that's in the first image which we don't really want to happen because it's just a bit absurd why would you do that so you can see it's even in the light box it's loading loading it twice so the way to get around this so as i said i've asked for you desi to add in that offset custom attribute just for once again and until that's done you just need to tweet this flight tweak of the custom code no drama it's not that difficult once you know what to do so if we go to our online store [Music] and we get rid of this bar at the bottom and we're going to online store we go edit code and we go down to our products and now it looks really confusing but it's not so what we're looking for is something that's quite specific and we're looking for this four set items in set items so and basically what it's doing is it's going for a for loop and it's saying for the set items specifically we're looking for the one that says product images for set items so for the product images give me those images basically now there's two that you need to be aware of within this current structure the first one is this a sign so you've got another one here four set items and set items but then it's talking back to this where it's defining set items equals product selected or first available variant meter field new design more images so that's dealing with our variant images and we don't want to offset that because we're only given the images that we're putting up there so we want to offset the ones that are product images which are the ones that are coming from this section here so where we upload those we want to offset that we don't want the first one to be showing so when we scroll down if you see here you can see here it says template else assign set items equals product images so we know the next one down which is this four set in set items we want to offset that we just want to say not number one please so quite frankly just go there put a space after the s type in offset colon and one and hit save fini cool all right so now we now that's done so and now we can go back refresh and you can see that it's been removed from that grid and it all looks good alrighty so now let's see let's go to our product variant page so we will just copy that to the time being and we'll go into here and we'll add in a description this is the one that's got the product images and the video that we've kind of ticked it through now the thing to remember is although all of these images are shown in the media field because these product variant images defined it won't show these ones if there was product variant but no image defined on a variant then these would display if there was no product variant at all then these would display so as soon as you add the images to here by the edit variant and as soon as you add these images in here they will override all of the other images that are present and it will be only visible based on the variance selection that you've chosen so let's preview that and here you go so we've seen our images are coming through and we can still we can click through no drama it looks good and if we are choosing this our images are updating and if you notice underneath we have our images present here and as soon as i click on another one the product variant images disappear because there is no variant images associated with this particular variant but as you can see the more product images aren't being pulled so the the media product images aren't being pulled in either which isn't a drama because basically we've told it not to do that and then uh there's that video that we did and you can literally play it and use it how you would uh and then now yeah as you can see here's our two different versions so we can use the drop down selection or we can use the button selection based on what you need and uh so yeah so that's it really it's not very complicated once you understand the the path but there is more to the pages that we can do obviously there's things like the product grids there's things like how do we do like a specs tabs and stuff like that which are quite quite handy to have on on a website and i'm going to go through and cover those off in separate sections again the power of conditionals is is really really really awesome to have because it means you don't have to develop multiple different templates and service multiple different templates you can basically create blocks or sections of of elements and hide them and unhide them based on a meter field or on specific conditions so great job you desley so yeah that's it really if you like the tutorial then and you haven't already please like and subscribe and uh yeah we'll see you in the next one cheers bye

Channel: AlternatePro

Views: 1,653

Keywords: Udesly, Udesly 3.0, webflow to shopify, udesly shopify, Webflow to Shopify Product Page, udesly webflow to shopify, webflow to shopify udesly, export webflow to shopify, webflow tutorial, webflow to shopify theme, udesly adapter, web development, web design, web design tutorial, shopify theme development, webflow tutorial for beginners, converting Webflow product pages to Shopify, product page shopify, product page shopify udesly, no code web development

Id: VVF6jiYhXPE

Length: 45min 4sec (2704 seconds)

Published: Wed Sep 01 2021