Learn it Live - Attributes CMS Filter #2

give me one second for that to come through [Music] okay what's up everybody welcome back to another episode of learn it live i'm here with joe today we're going to continue on learning about attributes so we've got two more filter installs we're going to talk a little bit about the product itself how it works we'll do a little recapping about what attributes are and then dive into um you know these two live builds so what's up joe how you doing rymer i'm great yeah out here uh ready to get into it again you know yeah me too uh okay so do we wanna do any let's just do a real quick um just a high level attributes overview you know like just you know we launched a set no code comp most everybody understands what's happening but there's been amazing feedback um it's really easy to implement as you'll see during the stream today it's you know it's not crazy to just go in and add this type of functionality to the site and so we'll answer whatever questions if you have questions about attributes if you have um you know anything you want to know about functionality what we're working on you know with these attributes uh you know feel free to leave that in the comments and we'll get to it as we go um joe any other uh thoughts there before we jump right in oh you lost your audio again joe see something here yeah bear with us for a second we've been having some audio issues that's why we're a little late on um we're having a little bit of audio issues joe can you hear us check text12 we may need to um just switch to your airpods there huh check check test joe joe is he frozen okay so we're having a little bit of technical difficulties just bear with us here um i think we will get this stuff there he's back joe we got audio on you check joke now you may have to switch over to those airpods for today damn right now okay there we go okay sorry for the technical difficulties you'll be getting a little bit less audio quality from me but that's not the important part the important part is what we're about to implement here it'll be just as easy to follow and i would like to give an announcement to those people who have been following attributes we've made a really nice update based on one of the most most requested features so we have our fenceweek.com vote for you to vote on new features of attributes and there were a few that we always heard and heard and heard so we went ahead and implemented one of those i'm going to go and share my screen here and show you it nice okay um give me one second i think i can get to that screen okay this here nice um hang on i think that's still my screen but if you give me one second i'm gonna bring your screen in here there it is nice okay there we go okay it's an update to cms filter we have a new attribute available to you and that new attribute is called initial state we've had a lot of people asking how do i make my list of items show nothing initially i want zero to show and only when the user interacts with the filter ui does that list update that list starts to show items so it's not an empty state it's an initial state empty state is when somebody selects the filters and there's no results empty we don't have any results to show you based on your selections initial is you don't have any filters applied let's go and apply some filters right now you are filtering nothing so all you have to do is add fscms filter element initial as the value you can add this to any div block and this will essentially turn on the initial state option for cms filter you can have text in here you can give the user a message like start playing with the filters or it can be a blank div if you want truly nothing to show so we just released this earlier today and again this was because we heard a lot of these comments in the community so we went ahead and built it joe tell me a little bit like um what were the use cases because i do remember we got a couple like examples and people were like how do i do x y or z and um yeah it was that it was exactly you know setting this initial state so can you explain maybe like a sample use case or why that would be super valuable for people well you know i think a lot of this is down to preference uh this i don't i don't think that there's really specific use cases at least i can't think of one now that you would need initial state but it's it's a way to keep your list neat and organized let me let me think of one last week justin on the stream was filtering through doctors if i'm from new york i don't care about doctors in alabama i don't care about doctors in california i only care about doctors in new york so instead of me going to the page and i just see every doctor where i don't really care about 95 of them i can now see no list and it says hey select your doctor select your state to see the doctors in your state i select my state then my doctor show so actually in that use case it's almost like a conditional step yeah right select this then you can go and see this yeah yeah yeah i guess that and i could see where you know you might want to like just start with a clean slate there and then start populating results as they start selecting these filters i could totally see a use case for that [Music] okay great so i think last week we ended with mustafa we had him in the background because we couldn't get into the site so today we're back with uh mustafa and we're you know i think we have access to his site right joe so should we just go ahead and pull that up and um let me do one thing here yeah go ahead and do that i'm going to pull up everyone who's in the comments i'm sorry i'm switching over to a different view here so i can say what's up to everyone in the comments but yeah feel free to jump right in while we do that great so we are going to i'm going to show you the finished product for this one i actually implemented it before this stream and the reason is this content wasn't set up exactly how i would want to have it set up but it works it's all there i just had to understand the structure and i think a lot of you may have to do this also that sometimes you'll find attributes fits perfectly into your structure you have one collection list and you can filter through it this had some variables i had to really understand what i was doing and what was available to me so i'm going to show you this finished product and we're going to go and implement it it's a little bit different than the ones we did last week okay okay great here real quick before we jump in let's say what's up to uh i see grace walker's the audience geronimo kayla williams kyle's in the house what's up penny uh ukuleles here with us vimalan armando tinette hello to net uh maria what's up maria christina um christopher coleman's in the house what's up everybody uh we appreciate you hanging with us we're just diving into the first project here so bring you back to your regularly scheduled programming now i like that line okay this is the the live version the official version this has cms library hooked up to it and you can see as i'm filtering through items in this list it is filtering now this uses a keyword filter cms library was all about keywords you put a filter by attribute and you target a keyword this worked for these bottom radios but we had to do something a little bit different for the top ones it didn't have the same structure that we needed so we actually needed to implement nest and we're going to build this we have hidden text this is visible now but this is going to be hidden text inside each of the check boxes you can see it's just a little bit different short sleeve tee but we need to search for short sleeve long sleeve tee you search for long sleeve and then we have these codes down here great so that's what we're going to build i'm not i'm going to build it on mustafa should i build it right on this live t-shirts page or do you want me to make a duplicate and work on the duplicate page like i did here for the joe copy whichever is easiest for you and again thank you for doing this i mean as i mentioned last week after watching the previous learnings so much more than what i was expecting and just seeing that initial state feature as well really exciting and can't wait to see how you did this nice thank you mustafa i'm going to make a duplicate just because i think that's a good practice live stream okay so now we are in here i am going to apply a class here just to show this this is a hidden filter we haven't really seen this yet this is a filter system that is not visible in the viewport at first this is totally fine it doesn't need to be in line with the content we have this 3d transform i'm just going to apply this class i have just so we can work with this and we can see what's going on now the first thing is going to be a comment on the filters we had asked mustafa to build some filters with forms and he did that exactly but there's two forms that are being used for the filtering and this is not what we want so you can see i have this form selected and inside this there's another form and we've been seeing this a lot i think we need to make an update to the docs to make this clear only one form can be used for any filtering list if you have a second form that means it should be filtering a different list so we need to do a little bit of reorganization here so that's exactly what i am going to do here i'm going to go in this filters holder and i'm going to put one form i have my form block and now i can have any kind of structures inside of here right this can be wrapped around the whole page it could be wrapped around the whole filter ui it doesn't matter but everything needs to go inside one i'll remove my initial elements and let's go in here inside this old filter the old form and i'm just going to grab this content this is exactly what i want here oh hold on i want this oh come on it's grabbing the whole form sorry i will oh this is a form element i see okay we're bringing the checkbox in here we're bringing the checkbox in here we are going to now remove this form right we have nothing left in this form we don't need it everything in here we have our checkbox holder checkbox holder we're going to put all of these in here great okay now we also need these buttons this needs to be a check box and mustafa has put in a button element which is what we see on this live site right these look just like buttons we're going to create that same exact effect with checkbox so let's go and do that i'm going to duplicate this checkbox holder and duplicate the checkbox folder and now we can go and fill in this content as i'm doing this i'm realizing should i be building the ui or should we start from the ui that i have created here and here i don't i don't know stop i think that one's for you sorry just not meeting myself um again whichever is going to be easy we can keep that if you if it's not going to cause any issues but if you feel it's going to be easier just to clean it up a bit then for the sake of it because i can then play around with it afterwards okay in this instance i am going to just copy what i did here it could take with explanation maybe 20 or 30 minutes just to build this but i'm going to copy what i did and i'm going to explain every single step that we have here nice joe and i'm going to grab this whole form block so this is the finished product of what we were just trying to do i'll zoom in a little bit more here for you we have our get that notorious webflow wheel of death inside of here and one more delete there we go okay we have our form block so we have a column we're filtering by short sleeve and by long sleeve short sleeve long sleeve and these are additional options for short sleeve and these are additional options for long sleeve the difficulty or the reason i had to build this is because these are actually part of different collections they're going to be pulling very similar data but the way that the e-commerce is set up these are different they have different values to filter through and we want to show a different text than what's being filtered by so if i zoom out here and go into settings you'll see that we have this checkbox label and the checkbox label does not have an attribute even though in the docs we say put it on the label you can do this if your label is what you are filtering by but now we actually have this filter that nobody wants to see this this doesn't really make sense at first glance this makes sense at full first glance so look what we have here we have our cms filter field sub variant sub variant and sub variant all of these are part of the same data and we can go and look at that data inside the build let's look at this data inside where is it sub variant for filtering this was set up for cms library but now we have this great filter right here long slim v long slim r so this field this cms field is going to be used for these check boxes right here this is part of a different collection it's part of a different set of data long sleeve vers short sleeve so before we get into short sleeve versus long sleeve let's just go and build this and make sure that this simple filter works on each of these as we saw we have the sub variant i'm going to copy this and i'm going to put it on this same text right here so this will be custom attributes field by sub variant and now when i click this it's going to be filtering by this so let's go and see that work we need to apply a few more attributes here to make sure this is all working we need on our list we need fscms filter element list and we're going to apply this filters to the form this is our form and we have fs cms filter element filters so we have our attribute on the form we have our attribute on the list we have our connection of cms data to the filter ui great now we'll publish and this should be working does anybody have any questions as i am going mustafa any questions for me it's okay no no joe um it's it looks fine i just want to make clarify why i use the codes below rather than the round nick and the v-neck i'm assuming it's something that i couldn't achieve but when i when i did the filtering by the round neck and the v-neck i couldn't get it to filter out the relevant product sometimes you'd filter more than one because there's several variants of it so i had to have the work around where i used those strange codes which are obviously hidden in the live website well i don't know exactly what was happening there are you saying with attributes or with cms filter with cms filter not with attributes with cms filtering yep so that's a big problem with cms filter that it's just a keyword search so this is found elsewhere in the product somewhere else it's also going to return that but now with attributes we can make a much better relationship between cms field and cms field that's the key difference it's not keyword it's cms field and that's the great thing about attributes which i found before with cms filter even if it was in the product description sometimes in the title anywhere else in the collection list fields if it saw that it would show it and exactly every question exactly that is it was a problem absolutely and that's why we built this exactly with that in mind so i'm going to click through these uh i can still use it like this i didn't even copy the attribute script i'm going to do this right from fin suite extension i didn't even copy the cms filter script for attributes which is a a novice mistake there it's your first time cms filter i'm going to add the script to the page here and if you don't know this is the fin suite extension here you can go to fensuite.com for slash extension to get this functionality in your webflow website the designer excellent and also for our preview i'll just hide my joke class okay so we're going to see this filtering just this we're not going to see any filtering of the top part the top part is a different data source it's a different field in webflow cms even though it's really filtering very similar content so if i reload this i hover over this we have our short slim rounded right all these people have rounded necks we have the v-neck we could see all the v-necks coming up short sleeve i can also add to this right we don't these are not two different forms two different filters here this is all together so i can add to that v-neck long slim there we go we see the long i can remove the short now we just have the the long sleeve and now we are going to do the rounded long so this is working this was easy this data was right there for us it was a an easy collection great now this is not going to work i don't have anything on here yet i'll explain why this looks so bad but we need to have a nested collection to be able to filter through this it's totally different let's go back in here and we'll notice sub-variant is different here i can't add a nested collection to this because there's already a nested collection in here this is a webflow limitation if i try to add a nested collection you can have one then more than one nested collection on a single page and i need to access this data i need to access the categories so look how nice i get my short sleeve i get my long sleeve right here for me this is the data i'm looking for as opposed to products when i'm in my products i have where's this tag the it should be towards the bottom somewhere if i remember just above the variance yeah there we go so products are variant it's a totally different field here so let's get into nesting this is going to be a nest instance first thing i'm going to do is copy this script on the page so i'll do that in the extension and i'm in here for nest i'm going to add the script to the page mirella thank you effing thank you for the extension thank you for using it varela i really appreciate that comment we're excited about it nice yeah we got a couple um questions here that we may want to address great uh let's see um did you get i don't want to block i don't want to interrupt a flow there though no we're just about to start a brand new thing okay great yeah uh okay so kyle was asking is it possible to have an active filter as the initial state and this was because you were showing the initial state attribute there but i think um you can pass that with url parameters so what you're looking for is just to have a filter applied as the initial state so kyle you can do that i guess maybe not when on page load like on blank page load could you set an active filter joe with that you know initial state yeah uh no that's different that's initial of the list right and i so one option one option like you said is the query you can put a query on the page that could be the default from some other link and it loads based on that query we have some other options for you option one for check boxes we integrate with webflow's native start check state so if i do start checked this is going to be respected by the attribute system option two which will not we will not implement here because there's no radio but i can give you a bit of a cool little trick here that you can apply checked equals checked and this is how you can start your radio in an active state this is not attributes checked equals check this is just html so these are your two options in in addition to the query option nice nice and actually we we've been hearing so much about starting with active filters that we are now thinking about and considering building specific attributes to make sure that you can make anything that you want active regardless of checkbox radio or select or anything that's the initial state there yeah that'd be cool okay uh you guleli is saying which would be the best platform to share links to our sites so that we can review cms filter cms load in action um you can share them right here in the comments if you just want us to take a look at it if you're talking about kind of diving in and and uh you know maybe doing a show like this uh diving into the back end uh there's a separate link i think there was an air table form for that um maybe we can share that in the comments as well um janice is asking hi thank you for great content does attributes work outside webflow native hosting so somebody's asking can they apply the attributes and get them to work on non-webflow sites that's a good question that is technically possible yes but you have to be right yeah you have to trick the the website into thinking it's using a cms collection list we have integrated so deep into webflow cms that we respect all of their classes and their structures so if you copy the exact cms list structure you apply the same default classes that webflow applies to those elements you can get it to work and i'll actually show you an example of something it's on a webflow hosted site but it's not webflow cms and that's our updates page this updates page is from github this is being this is living and being hosted in github we have some custom code on the side that's bringing that into our project we've applied some fake webflow cms classes around it to make it think it's web plus cms and then now we can filter through this github content and this is filtering using attributes so this is the work around now we are working on a developer api and when that launches yes the sky's the limit you'll be able to do whatever you want with that in or out of webflow nice cool okay all right let's see what else we got attributes makes this stuff so much simpler loving it for sure harshit saying the checked checked is an amazing trick so yeah um you know just remember we're still working with html basic html elements here so if you know if something works with html it'll probably work uh you know here inside of this if webflow gives you the you know controls inside the designer um okay great uh and then ukulele is saying thanks guys the site is only going live tomorrow so i'll be able to share it then great we'll look forward to seeing that so okay let's um jump back into this last uh little update here on the site cool okay so we have i'm going to remove this styling here these were originally buttons and we have changed it to checkbox so this is a standard checkbox element but we can make this look just like a button it doesn't need to have this checkbox visible so on this outer wrapper of the checkbox i can apply a class this one i'm calling button style i'm giving it some padding to look like a button it has position relative i'll explain that soon and radius border is stuff like this this is just making it look like a button and i'm going to also apply a style to this button here this checkbox button style button style is going to add width 100 percent height 100 percent absolute full z index negative one what this is doing is hiding the checkbox behind the other content so we can't select it we can't click on it but it's going to be recognized it's going to be accessible and we're able to interact with it just like a checkbox but as you can see it doesn't look like a checkbox right this looks very different than this does so this is a great way to do it we're also going to be releasing a filter ui kit that will have a lot of different checkbox and radio options just like this so go back watch this stream figure out how it works but we're going to release a lot for you to clone and joe i wanted to remind you on the that's why the parent element for that check box you made relative because of the absolute positioning of that box when you put something absolute it's going to take it out of the order unless its parent element is relative in which it will then just adapt to that size of that container and so that's how he's hiding that button there yeah yep exactly and we'll do that exactly for this great okay so we have everything looking good here now we need to filter by this long sleeve right this was one of our categories in here and you can see that it's long sleeve not long sleeve tea so even just having this t in here there's going to be some confusion with the filter so we need these structured text like this so i need to nest a list in here we saw before that we couldn't add a nested collection so i need to go in and do a cms nest implementation so let's go through this now i'm going to hide this so we have a bit of space to see and the first thing i do with nest i already copied the script i'm going to add to the webflow cms list a new attribute fs cms nest element is the list i'll zoom in here now i need to go and make sure that this is here this is a very important step and it's already in place inside the list there has to be a url to the current product or the current item of your primary list so this is already in i don't have to add it but this is a required step inside this product card i'm going to add the tags here i can go right in attributes and do fs cms nest collection now is when we start referencing and making connections to our nested collection the collection that we want inside of this content so i'll go and call this our categories great and i'll copy this for future cms nest collection categories great the nested list is going to be appended or pasted into this div block we don't need to see this we're going to hide this before we go live we're going to hide the tags the categories list before we go live but it has to be inside the item so now let's go to the bottom of the page and we're going to add a collection list at the very bottom this collection list is going to be our categories collection this is what we want to nest and this thing will actually go and nest inside the the item so i'll go and add a text link we have a required link to our current categories page and for organization i will add the name to this although not required or actually it is required let me take that back uh great okay now we need to make this reference remember a lot of attributes especially in cms is all about creating references from one thing to another so we're going to put that same fsness collection and we call this the categories nice and now we have one more step we have to do the same thing on the products template so i'll go to the products page products template and this one is actually still there from when i was testing we can see this we have the same thing actually i'm going i'm sorry i'm going to remove this let's do this fresh collection list this is going to be the referenced categories product fields categories which is a multi-reference this is exactly what we're looking for so it's only going to show what's referenced for this product item and each product item will have this let's go to text link let's link this to the current category page and we will take the text wonderful now let's go to this list and make that same referenced connection remember categories this has to be done in three different places inside the primary list at the bottom of the page of the primary list and on the template page of the primary list and now everything is referenced now we have full control as to what is connected to what which categories are in which products so i will hide this from mustafa so we do not forget hide great hidden now let's go back to our live stream and this should work this has everything we need so i'm going to push a publish through and it's not going to filter yet but we're going to get our nested collection in there once the nested collection is in there then we can go and start to apply our filters our shit's asking if we can tease the ui kit i think we can tease it can we can we get the url out can we hide the url yeah we could do that all right give me one let's tease it yeah okay give me one second here i'll do that all right let's test our our nested collection here there we go so we have our nested item showing up now these are in the item now we can reference our cms field inside the filter i use the word reference a lot but understand that we're making one reference for all the cms nest items and then a reference from the filter ui to these newly nested items and the only thing we care about in these is the short sleeve and the long sleeve we have other items in here right we have the the v-neck which we actually don't care about in this filter we have the what else do we have i guess that's it for this page but you can see this ecommerce is bomber jackets hoodies and t-shirts so there's a lot of other content here that we don't care about so we're actually not going to use a cms collection list and you may have noticed we didn't use the cms collection list in the first filter that we set up in all the other examples if we're making a reference to the webflow cms field we normally put in the cms collection list to generate these topics these contents but we don't need that for here this is different this is all being done manually sub-variant not in a collection list and same exact thing for here i'll remove these so we do it together okay we'll call this the cms fs cms field cms filter field and this is going to be our primary variant okay and as primary variant primary variant so instead of at instead of searching for every single one of these we're just searching long sleeve and short sleeve because these are the only two check boxes inside this uh primary variant yes as i was watching you in uh put these in there i'm wondering if with the extension could we have an auto fill in that attributes field so when you go to add an attribute and i start typing fs dash do i get like an auto complete like in a code you know editor or something like that where it's like oh which attribute you want to use here's a list of and i can you know you can just click and you know like it just that'd be cool we are working on some very interesting things around that topic so yes the the integration from attributes to fin suite extension is not over it's just the start we're just testing out what we can do with fin suite extension but yes we have a lot of plans to more fully integrate attributes to the extension okay so we have our primary variant primary variant and now we have to apply this to this nested collection we're going to do this down here because this is actually where this content is going to be generated from so i will go and apply this right to the text here condition not conditions i'm going to call this fs oh i have it on my clipboard yeah primary variant and now all of these nested items that will be here on page load have this attribute primary variant so now when our primary variant here is searching for long sleeve it's searching through this list and through all of the references we made through the the work we did on the template page we know exactly what should be inside each of these so i think those are all the steps i'm pretty sure we are ready to publish and check this i don't think i forgot anything nervous moment right before that page refresh and you're like will it all work or not what's up michael saying he's late to the party but glad he caught part of cms nest yeah for sure and for anybody who's watching the uh youtube dvr should be available so you can like go back if you want if you need to miss or if you missed something you can like scroll back five or ten minutes or you know whatever and then catch up to live so okay webflow froze on us in here let's let's reload designer let's see if that publish went through i'm not sure if it did let's see if this works then it did short sleeve no did not go through are you dragging and dropping that selector filter thing this no this has a this has a move effect okay and since uh since we're viewing it here it's still doing the move got it okay let's get this published through while we wait uh i'll talk about a very interesting update another update we have based on user feedback based on what the community is asking a lot of people want to use a drop down oh come on a lot of people want to use a drop down inside the filter system and we allow you to do this for sort but we don't allow you to do it for filter and we thought about how to implement drop down into filters still using form elements but the drop down where the the current filter is put in the top of the drop down so our top our top solution here is to actually create something that's going to fully customize the select element so in a week or two maybe three weeks you're going to be able to fully design a native form select element which is near impossible without a third-party solution it doesn't accept css it doesn't accept so many different things throughout the select element but we're actually going to let you build that select element and then design it exactly how you want to so if you're one of the people that want to use the drop-down for filtering uh that is coming in a much better version and this is not loading for us um i don't know we've broken webflow we have broken webflow here this is not responding even on just like a hard paid refresh huh yeah dying oh that's the ugly one right there that means it's all over [Music] all right now it'll work you know okay it told us that it just if it does it again should we do what i mentioned last week but if you go to the settings and publish from there it tends to publish quicker when this type of thing happens nice okay we can try that we got a quick publish let's see if it works okay we have our nested collection here we're going to filter by short sleeve okay it didn't work oh long sleeve works maybe i have a typing mistake here long sleeve is working so you can see that we have long sleeves selected in both the v-neck and the round right we have v and we have round options so we have this successfully working here short sleeve is working okay and you can see we have short sleeve in the v and the round great long sleeve short sleeve we can go short sleeve and we can go oh of course there's no long sleeve short sleeve combinations but we can do short sleeve and this we can we can click around to this and select any of these all at the same time they're all part of the same filtering system so this is working now let's talk a little bit about the styling and before i do that i'll stop for any questions or comments i i have one or a point to maybe make here and maybe mustafa can answer this or maybe this is because it seemed like there was some conflict there right if you have one of the top filters as short sleeve and one of your bottom filters is long sleeve you you inherently have a conflict there so is that something we could fix with just the naming um is that like something that should you know like what's what's the best way to handle that do you you know maybe just make sure you don't use the same name when you're referencing two different filter elements right because it seems like that's where the conflict is or because it would be smart to be able to sort by short sleeve and then click v-neck and not have to know short slimmer or short whatever you know it's for those things so i'm just wondering mustafa that could be like an information architecture question that is causing that conflict here rather than you know anything on the faster side yeah i think there's definitely an improvement that can be made there the reason it gives a conflict is because it's a short sleeve uh you're looking for a short sleeve tee that's v-neck but you're checking it on the long sleeve v-neck list so i obviously need to play about with the ui to make sure that you know to improve that there's definitely something that can pre-improve there because there's no there's a short sleeve b-neck but it's the filter there that you can see under short sleeve maybe have that disappear when um short sleeve is selected and then the right side will disappear i can do something like that with the transitions but that's why that's the reason for the conflict yeah and that filter slide is normally hidden so that it wants to take up too much real estate especially on mobile there's about 80 of the people that come on this site um mobile it's what i get from analytics so that's where i hired it and also there's not more than six colors anyway so i haven't added all those different filters to it to make it as simple as possible and you can scroll through it really quickly got it okay nice okay um joe where we at uh functionality-wise here we do have uh steven in the background uh waiting for the next project are we at a good swapping point here or do we have uh other attributes to throw onto this thing that's it uh we we have this filter working it is filtering the data reliably it's not relying on the keywords that was causing a bit of an issue on cms library and yeah i guess i'll say mustafa do you have any questions is there anything that's missing here that still needs to happen or something that you'd like me to do no it's with attributes it's working a lot better than it was with cms filter literally my mind is blown with the nesting of the content at the bottom there's the cms at the bottom um learning new stuff just christmas come not early right in time hey um i it got me thinking here on your information architecture there i wonder if you could just use a slim as a toggle you know and then you have short long v-neck round and then slim as a toggle and so you can either turn the slim on and off and it toggles you know that way you don't have v-neck short slim v-neck you know regular short i don't know maybe you get rid of that conflict we were just seeing there well definitely going to have a look at it again um after this it's all very valuable input and incredible work um like i said blown away um awesome thank you and listen tomorrow thank you so much you can hide all of this remember you can hide every one of these little keywords right these were just added just to filter these can be hidden this does not need to be visible it wasn't visible in filters either it was just there as a reference to sort out the issue that no longer exists in attributes so brilliant and one more thing for you you can apply an active state so i'll just show you this in filter uh you can apply where am i highlight class active active class you can apply this active class to those check boxes so it looks just like a button so if i go and apply the class name to the identifier of that i can go into this hidden text and i can say this is going to have a custom class name and now that is going to be the class name that's applied to the outer holder so that you are now able to apply that same exact button style that you have on the live site right you want this black background it's all there for you brilliant cool nice all right thanks mustafa i really appreciate it thank you for being part of our community everybody watching mustafa is here all the time he is uh i see him a big core part of the the community thank you for being a part of it cheers for sure thank you for the work we have to thank you we just you know i am in or i can only speak for myself thank you so much thank you nice okay great so uh thanks for hanging with us mustafa we're gonna switch over to uh steven now i think what's up steven hey how are we doing good and uh let's see we've got armando's saying thanks for the update kayla drop downs on mine but you can only stop down the style the drop down list i think she's going back to the yeah the drop down stuff branson sense of saying joe's the elon musk of webflow there you go getting a little bit of love joe and nice penny's jumping off we'll see you later penny thanks for hanging with us um okay we're gonna jump into stephen's build uh joe you got it ready up on your screen there anything we need to do okay great i am logged there we go okay so here we are going into the chive website here and inside chive we have our charities page and we're going to be filtering by charities and when i was looking at this one i realized there's actually a couple of different things and options that we have here so we're going to go through these options live in the stream here and the first one being stephen i notice that there's a bit of a difference between this jet boost and the fin suite one so you're using the select field and then here you've switched to the check box what would you prefer uh i think well the the jet boost one in short the cms was um it's actually it's actually not part of the so the cms in the bottom one is a separate cms field if that makes sense so you have charities and then you have charity types that drop down is an additional um piece of data we had to add to the charities cms if that makes sense so it's um and that was the limitation with jetboost is that we couldn't filter by a separate cms if that made sense we had to filter just within the charities so i had to add a separate data point that was like what type of charity they are but actually isn't the cms that's in the second option if that makes sense um so in shock it's the second option ideally because that's what um yeah is more dynamic and less time in mind awesome okay so let's do that i'm going to do you mind if i go and edit some of these styles like wrapping this so we can see everything okay cool let's wrap this looks like there's some height applied and we do have a 8 viewport height i will reset this one on this page great okay so we are going to be filtering by this and this is charity types and we want to get that charity types collection in here and now you say charities has a reference to charity types yeah nice oh with a nice big list this is prime for cms nest so this would never ever work with webflow's native nest because there's a max of five items so that's a perfect use case for cms nest so let's go and do that first before i start setting up filtering of nest i'd like to just get the data in here just so we have it available to us so i'll do that exactly i'm going to go into the extension i have my nest and i'll add that script to the page we have a question from john john asks how do i add animation to each cms item so john we do not have the ability to add animation to each item we made the decision to only animate the list and the reason is there there was a whole list of potential problems that you could have with accessibility with proper rendering with displaying only what's needed on the page and we made a company decision to only animate the list element not each individual item that's how cms library worked but we actually made the list to the change to the list because we think it's a much stronger and reliable option for you okay so we have nest here on the page let's go and add our fs cms nest collection and this is going to be the charity type great and we will copy this oh this is not right what am i doing so this is not where you put the collection this is the element list i'm jumping ahead of myself here we need to go and put that inside of the item so i'm going to add a div block this div block is going to have now our collection and now this will be charity type we also need to make sure that there is a link to the template page here so let's check if that exists it does current charity right here so we need that it's already in we're done with everything on the list now we are going to go to the bottom of the page here and we're going to add a new collection list this one is going to be our charity types this is what we want to nest in the list and i'll go ahead and add this text link the text link must have a reference to the page and we're also going to add the text in here now let's go to the list element and add that same reference the collection of charity type cool all right that is it for this page now let's go to our charities template page and here on the charities template page on the bottom of the page i can go and add this collection list and do the same thing that we just did but we have to make sure that we have this multi-reference selected we don't want this one we want the multi-reference version so i'll go do that same thing with the text link i'm going to choose the current page i'll add the text here and we are going to make sure we have this on the list charity type okay and i want to make sure that we hide this to make sure that we do not accidentally leave it in here do we have a hide class or a hidden class stephen do you mind if i put a hide class in there for you sure thing great okay three on this page that seems not correct i just want to make sure this is a live build so i want to make sure i don't do do you know if there's a hide class that you're using actively no okay this is this must be a web flow issue here okay no problem we're hidden we have the content where we need to be let's go back to our charities page and now we're just going to test the nest we're not doing anything with our filtering yet we just want to make sure our data is where it needs to be nice there we go so we have all of this content in here nice and look at this a very unsupported native nest and there we go remember this can be hidden we're not going to hide it now because we want to check to make sure everything's working but this is not part of the design no problem now let's get into filtering let's now go and add our filter script to the page in components attributes filter and script page great okay so we need to put first let's do our form element our form yeah form element up a bit more okay so we have our form it's surrounding all of these which is perfect but it's not surrounding our search input so we're going to put this inside this form as well so i'm in here i'm going to drag it is this a separate top okay perfect this needs to go in here form block cannot be oh okay we have another instance of double form okay we definitely need to update the docs if you if you're watching this video at any point in the future the docs will be updated with more cl more clear messaging here so i'm going to go and grab this this is what we're looking for hey ah one more nested okay i'm going to come on i should be able to add this ah in here i think webflow should have another icon here to indicate form this looks very div blocky to me there we go okay now we have it in here we have our let's add this as well take this search wrap out top text attributes there we go and there we go yay nice okay i believe we're good here and i can go remove this so just to recap what i did there was a second form surrounding this search input and every single filter ui element has to be within the same form so that's why we do not need this great so let's go to that form element and this is in the form yeah okay good form let's go and add our fs cms filter this is going to be an element of filters and let's do that same element for the list so we're going to add cms filter element and that's going to be the list cool we have now added our element wrappers now let's go and add our field attributes we'll start with these check boxes so we're going to go and add a attribute of fs cms filter field spelled correctly filter field and this will be let's use the same identifier just so we stay nice and organized this is going to be our charity types which i already typed i don't think it doesn't matter charity type and now let's go and do that same thing down here charity type okay all right so if everything happened as planned we should have a working checkbox filter here cool okay so i am going to choose one of these and we'll see that we have conservation showing up and we have period poverty showing up that's interesting uh i bet this can be because of load more we're going to need to add load more in here yeah that's working they've got like 12 different selectors i think so i think they got the most money it's cool to see this one great okay so this is working we have we have everything working here this is all good updating we have everything as needed okay now let's go and do this search input steven what would you like this to search by which cms fields that's a good way to put it um yeah it's a good question obviously i think name's important um but also the description um so it's the short description that they have that's in their the collection um just because that gives a good sense of their priorities or what that charity is focusing on in a sentence name description would you also like to search for these questions okay so you can see i'm kind of separating this list here i'm just everything that steven tells me i'm just going to comma separated and this last one is charity type and now we've added these identifiers name and description at this point in time attributes does not know what that is we have to actually define what these are so i'll go and do that right here this is going to be our name so we'll call this the fs cms filter field this is going to be the name let's copy this for speed and let's do this in the description here nice and let's do this okay that should be it all right let's go publish and see if this works ooh i like this class comment from nick webflow needs to make f and sweet the hbo of webflow tv that's cool you know what you should write into their support about that i'm kidding all right let's go just send everyone into the comments of webflow tv just be like yeah why isn't there a dedicated fin suite channel on this thing streaming off and sweet all the time right okay here we go so this is we're going to look at this one i don't know why this one keeps showing up randomly but we'll we'll look into this but you can see yellow halo is coming up here let's search for another one let's search for education and you can see we have our education tags coming up education okay it may also uh return in here the word education will be there education education great uh art woven earth great so this is working now let's go and apply this cms load and let's see if that that weird one at the end goes away i still don't know why that is coming up this last one on the list hey come on looks good all right either way we're going to continue with our load instance so the first thing i'm going to do is copy the script and the reason that we're doing this is so that we can search and filter behind the first page of content all the searches and all the filterings that we were doing was just on that first page whatever stephen has set the pagination to 10 items or 20 items that's what we're searching by so we'll actually we'll look at that number when we were doing our searches we were only searching by 24 items not the remaining seven pages so this implementation is now going to filter through all seven pages and the only thing we have to do for that is add our load attributes cms load this is going to be the element and this will be the list now we have pagination on that's a requirement for our load and let's also make sure that we do [Music] the show page count great so this is enabled for speed boost this means that it's going to load everything near instant and this should be all that we need here let's go and see what's on a later page to see if we can return that so i'll go to page seven and we'll search for the cloth okay we'll start on page one let's push a publish through i will say i don't know what's up with this oh interesting green tick it shouldn't matter all right we'll see a few seconds ago let's see what we got okay what do we have what's happening here okay this is working and when we search for please show empty state if possible yes eve will do this am i typing this right h-a-w i already forgot the one that we were supposed to search for i think it was core thrawn like caw ah there we go that's why it's not showing up there we go okay so this was on the last page here and there we go so this is showing up behind the pagination excellent okay one let's let's now make a couple of nice usability upgrades here and actually let me ask you this first stephen do you want a load under effect like it is now or do you want a more pagination effect i like the pagination effect um cool yeah and also if if possible and if not that's okay but with the with the categories um because obviously there's like 52 of them at the top so like yeah having it kind of limited maybe to just one row if that's possible but if that's not within this then that's okay um okay well let's let's first do the pagination so all i need to do for pagination is cms load mode pagination that's it now we're going to have a next and previous button that go back and forth do you want to scroll the user back up to the top of the list after they've gone to the next page [Music] yeah yeah i think so okay i think it's a good one all right so let's go to the docs for that one this is not on the top of my head so we can do anchor scroll when the user filters the content 24 pages of scrolled content when they go next they'll be scrolled up to the top so they can continue scrolling down we have to add it to a div block with scroll anchor and you can absolutely update this afterwards i'm just going to up i'm going to add it right here for now just so we can see it working scroll anchor okay and you'd like one row of this like as in somebody can horizontally scroll through it yeah correct okay okay now that the uh viewport height makes makes sense all right let's see what we got here for anybody who's watching now i'm going to share in the comments if you're interested in having us go through your site on an upcoming build or if you've got some interesting implementation of attributes you'd like to get look at i'm gonna pin that to the top of the chat there so there's a form you can submit sites and uh i don't know seems like we might do some more of these like just live building problem solving have the community submit sites and go in and do stuff like this if people like it you know okay so this is what you're looking for and if you were to apply some custom css to this horizontal scroll x you'll be able to scroll through this horizontally is that okay that i leave it out like this that's perfect oh where did this search go oh this whole thing is extending here next up attributes um on first look i do not know how to fix this ah nice okay so i'll leave it like this i'm not gonna do too much layout stuff especially on a live project but there we go we see everything we can work with it okay i'm going to do just a few things to improve the experience here one of those things is going to be a delay on the search as we can see here with every single keystroke we're going to be updating the list so if i type one two one and i'm just typing things every single keystroke is going to flash and update the list sometimes we may want that but a lot of times we may not want that so we have a attribute called debounce and debounce is going to let a delay happen as the user is typing so that it only filters the list after they're done typing so let's go and apply this to the not the list we're going to apply it to the identifier so it's only on this search input and let's just do 400 here so we can really see it okay so that'll do a nice little delay we have a lot to check here so let's do that we have pagination to check we're going to scroll to top we're going to check the debounce and steven think if there's anything else that you want as we push this publish through okay so i'll do yellow now i stop now it searches excellent uh rising now it filters and you can see a little bit of a scroll anchor if you just change the location of that that'll be great but the the real benefit of that is when you get to the end of the list and you want to go to the next page of pagination it's going to scroll me to the top so i can continue scrolling through i never like when i'm at the end of a pagination it goes next and then i have to scroll up to the top and then i have to scroll back down so it's going to automatically say to the top okay and that's it for the checking this still works all good anything else this seems good for now i really appreciate it thank you so much and also know that if you know if you're ever thinking about a different layout or ui or anything for this you can consider the select and also [Music] you can consider select with our cms select option and also in about a week or two when we release the custom design select you can create a super custom element that drops down with these filter options so you can have search right here then you can have the drop downs here and it's just one bar of mega filter nice yeah i'm looking forward to that cool okay we're all implemented it's great thank you so much i really appreciate it thanks stephen all right nice so uh i think that's it stephen uh there's your site's uh ready to go whatever changes you got to do on the filter side there on that little uh not the filter but the little design of that little those categories you know maybe get that styled up a little bit um anyway i'm trying to see if we have any other questions from the audience here it doesn't look like we have a ton let's see phillip trot you've done demos of how to build a site using uh let's go ahead and uh stephen thanks for your time we'll go ahead and let you pop off here um we can go to this view yeah for sure thank you um come over here and let's go back to these comments let's see it's not working there we go okay how to build a site client first from scratch can you do one of how to clean up a site while implementing client first okay so they want us to go that's so hard it's so hard to do we've had like people have requested this in the past and it's just been real hard because we never know how a site is built you know um looks like i'm on the wrong page here joe do you want to answer that do you want to like talk to them yeah so philip this one's hard because i don't think it's very relatable in a sense that every project that's not client first has some different differences it could have been built by a pro and it's not client first it could have been built by intermediate and it's not claimed first could have been built by a novice and it's not claimed first there could be a web or a mess of different issues with the site where implementing client first may make sense it may not make sense uh so that's it is a hard thing to do it's not something that we're ready to just jump into i haven't seen a site yet that i look at and i say oh i should change all of the classes to this to client first usually my answer is i'm just going to rebuild this thing yeah yeah i think that's the best way in a lot of instances because then you're guessing at which classes already exist which ones don't which ones in the old site are you know like combo classes or style differently or maybe affect other things down the page and like there could be a million different things you know that that it just becomes harder to try to rebuild than it does to just build it from scratch so uh phillip's got to follow up here i'm just asking because i want to go back and clean up my own sites i'm definitely not a pro but i like the system okay that's a different that's a different play maybe understanding where to use certain things i could certainly see pulling up an old site and being like oh this here that you're calling this class should be a global class in this way with client first i could totally see the value in that kind of thing you know what reimart do you think it's a good idea we can ask philip to send a read-only link and just for five minutes i'll go through one page philip i'll give you some some pointers on how you can improve the naming we can for sure do that so philip go ahead read only for any of your sites and if you want me to look at a specific page i can or i'll just go for the home page yeah nice there you go that's a an offer um you don't want to pass up if you get a chance put it in the link there uh let's see ukulele is saying can you elaborate a bit more on as to what client first means sure first i see another question here what is client first so the very first thing i'm going to do is share the client first documentation you're going to have a lot of information inside these docs but the short version is client first is our naming convention our webflow style and class organization system for webflow and this helps us build neat and organized websites for our clients additionally it helps other people that use client first interact with the site the reason it's called client first is it's made for clients or non-technical people not necessarily always for clients sometimes clients don't touch the site but the idea is somebody who has no idea about web flow somebody who is a complete novice can now go into the project read the class names and understand what they mean so we hit launch client first a few months ago it has been a huge success internally i think it's been a huge success externally and a lot of people are really adopting the system because it's clear simple and it's made specifically for webflow yeah yeah and there's a ton of documentation here it goes into the mindset uh there's tons of video content actually um i think we're even in the middle of releasing a series on how client first can help you be more productive in webflow right now on youtube we're doing like a once a day video release through saturday um so if you're interested in learning more about client first how it could help you be more productive in webflow um we're seeing it pop up in like job requirements so people are looking for webflow developers and they're specifying that they'd like to see folks you um have experience with client first and so it is really becoming a good system for building in web flow and kind of gaining some traction reloom just created this huge library so now there's like component libraries that other people are building on client first and so client first is you know kind of taking on a whole life of its own as it's out in the ecosystem of uh webflow but the core just is you know making things more understandable for anyone to kind of open up the project and get a grasp on that so good question there we have a follow up on that so it's like bem naming bem naming convention it's similar but it is not ben it's not bem has specific rules that we do not care about at all the only thing that makes it look a little bendy is the underscore and the dash concept but it is not the same nice okay hey i did notice earlier um eve was saying please show empty state if possible i think maybe he was talking about on the filter instance yeah are we too far gone on that or did you already log out we are i am logged out we'll do it on another show it's okay i just thought of that yeah yeah yeah we'll we'll dedicate some time at the beginning of something to show that okay uh i will for sure be watching the productivity series for client first webflow style system yeah if you're not uh jump over to the youtube channel uh it's the most recent videos we've been publishing i think we started monday and we just got a video a day kind of coming out productivity series for client first it's a great way to kind of get your hands around it outside of like the documentation already exist right so like all the documentation exists for what client first is and why you should use it etc but if you're looking for more that productivity series as amar says they're nice snacks during the day so little video content snacks uh philip trott saying i'm trying to pace but the link is too long oh the webflow share link um yep i've already i've already uh nice okay been said uh yeah uh he's going to send it got it okay yeah so uh all right uh yeah i think that's all we got until we get this link from um phillip joe any of the thoughts while we're waiting here i don't think so oh we were going to to tease our ui kit that's right just use the ui kit for everyone who was uh patiently watching at this point still here steve's going to be so mad he's privately working on this but her blew it up our ship blew him up earlier and um and your url is blocked your url bar is uh blocked up there hang on i think let me do something real quick let me just make sure yeah that's you let me turn my video off and screen i'm looking for oh there it is well give me one second see i didn't have it blocked off on this one i was about to i was about to spill the goods it would have been tragic okay transition there we go nice okay so we're working on this filter ui kit and it's going to give you a bunch of copy paste cloneable options for creating radio buttons and check boxes so we want to show you that radios and check boxes don't have to look like radios and check boxes they can have svgs they can have absolutely nothing they can have images and text so look at this we're going to give all of this away to you as a cloneable we're going to continue growing this library and we'll add more and more components in here we'll start to add range sliders we'll start to add anything toggles and we want to you know we want to make sure that you can implement attributes as fast as possible and really the the most time-consuming thing with attributes is just building it in web flow so if we can give you the tools to quickly copy and paste these elements in webflow now the the setup process is even quicker so that's it for the filter components let's go into this project so if you're just coming in here we are looking at philips project and philip had asked how do i convert a site to client first and we told him there's no easy answer to that but right now i'm going to give him some feedback and opinions on the naming convention nice first let's scroll through this let's see what we have we have some content okay fairly simple page here let's look at this wave section plain section section okay the very first thing before i can even start before i start to get into this deep we have three different naming conventions for section this is camelcase this is space with capitalize and this is a single word so the first thing to be more unified name these all the same wave dash section plain bass section footer dash section whatever these are and i would be a little bit more descriptive than plane and wave this is not giving me enough context unless it's used all throughout the build which it's not we only have one on this page so if i were going to name this i would call this the home hero section or if i'm following client first it's actually like this one on this page so this is the section home other i'm not going to name them specifically home hero div i would not call anything div they're just unless you really need to specify that this is a div element because the person looking at this needs to know it's div it just is not needed so what i'm going to do here is call this the home hero this will be a component and this will be the uh image and this goes to a really good question actually that you can maybe describe as we're talking about this jeremy's asking uh if can you explain when you use the dash versus the underscore there and you just did that yeah so can you just walk through why you did that and why you use those i would love to we use an underscore in client first to specify a component a component is anything that can be seen as a full structure a full element it could be a ui element it could be a slider it could be a hero it could be a footer it's just a way for you to stay more organized so that when i name this with home hero now this is the image i know that these are part of the same component these exist in the build for the same reason they're part of the home hero and same with this it's one on this page this is not throughout the build so what i'm going to call this is the home hero lottie now instead of all these mismatched classes i have this structure where i say okay this class this class and this class were all created for the home hero and of the home hero we have the image wrapper the image and the lottie so i would phillip go through each one of these and the first thing you know even if you're not very fluent in client first try to keep the same naming convention we have this very developery javascript camel case we have the spaces and we have some capitalized keep it all the same and i'll just do one more example of this let's call this the applications i see that word here and this is philip saying this is my first site in webflow so i was just figuring things out which is perfect learning experience this is and this is super common like i even go into older sites and things that you know because i'm not building as much as i used to anymore and so like i go into sites and i'm looking at my you know naming conventions i'm like you know like some of those carnivals and some of those things and so yeah it happens to the best of us uh the goal is just to you know learn you know some more structure moving forward and and finding a little bit of that consistency you know it just starts looking nicer you'll start seeing your you know your navigator there will just feel more easily navigable you know it'll be easier for you to kind of understand what each element goes to and where they're sitting yeah and philip uh i will double that comment this is not bad especially for a first sight i'm not trying to rip this apart just giving the giving some good some good uh next steps here and now look at what we have here with this home hero i can now say i want to do this new thing i want to explore a class and i'm going to search for everything in my home hero so now i can see all the classes that match home hero and it's really nice to be able to search by this underscore here look how we cancel out things that are not part of the component this is technically not part of our component nice and now when you have 50 classes or 100 classes or 30 pages this becomes more and more powerful as you continue building yeah um marie is asking a follow-up here how would you name it if it's used on more pages so you have that component that you just created home hero but what would you do if it was not on the home page if it was just a hero sure take out the word home that's it that's what i would do if there's another word to describe it you can do that uh if maybe it's a universal or it's a option a you know you can have different heroes hero a hero b hero one hero two but if it's just let's say it's the universal hero this is happening everywhere in the project i would just call it hero yeah the only reason i'm using home is because i see it's used on only one page which is telling me this is specific to the home page it's not used elsewhere right yeah and maybe if it's going to be something that on every page you want some kind of hero section but it's not the home page it could be top page hero you know because maybe you want a hero section that's like a middle page hero you know so like you know you just this is where the flexibility client first comes in it's just you name something that describes what it is and you know just kind of use that to you know to give yourself some some checkpoints as you go melissa chan is saying after knowing client first i realize what a nightmare i've been yeah we all we all do it it's like even now i bet you go in and you see some of these sites and there's mistakes and you know it's not always going to be perfect the goal is to just give it as much structure as you can so that it's scalable and a lot of this doesn't really come into play until you have lots of other editors that have to go into big sites you know right if you're just the only person jumping in there and you know maybe whatever it's you know it's not too crazy a deal right okay nice uh anything else any other questions about this build about should i close this out yeah phillip you have any final final ask for us he's just saying we're doing awesome stuff he's a big fan keep up the great work so uh yeah thanks for hanging with us phillip tell a friend to like the video you know that's that you can pay us right now we appreciate that uh let's see anything else yeah somebody was asking tim was asking i've used the filter function with the visual scriptwriter which right off the bat using visual scriptwriter leads me to believe he's talking about the cms library not attributes but a question what if i want to filter by two options let's say by price and category totally doable with attributes and i even believe with cms filter two but obviously everything's moving attributes so you know you'll want to you'll want to make the jump into attributes on that i think um yeah am i misreading anything there joe or any other thing no yeah tim i think you're going to be able to achieve that with attributes we have so many solutions to be able to link content and get content where you need to go i don't see any problem with that yeah yeah right and you can add he's saying does it give all the options for example below 20 and everything in in category jumping or is it also possible to show the options that are below 20 and in the category jumping sure yeah yeah yep we have range you you can filter by range and you can specify a from and a two and using that you would be able to create something as you're describing yeah nice okay uh let's see what about class naming for hide at smaller break points um in client first uh i believe we have responsive specific hide classes so you can hide something the global class hide on mobile on tablet on desktop yeah yeah and i think if i remember we talked about yeah do you add in new combos she's asking as a follow-up yeah check the documentation on the responsive section that's the best place to to send people i think and melissa it really depends on the case you know we're not giving a very clear answer here because maybe it does need a combo class maybe it is applied directly to the class maybe you want to use a global class to apply that hide so it really depends on the use case right tim do we have a link to the attributes of course we do and i'm happy to share that in the chat right now we can just do this too i think let me see will it do it there we go it's up on the screen four slash attributes nice layouts are harder things for naming yeah when you get into like the layouts and stuff if you get into like um you know different components sometimes you can start running out of names and stuff but yeah [Music] okay uh jeremy okay that makes sense thanks for the explanation i think like i complicate myself too many stuffs it can easily yeah you can easily do that you start getting in the habit of just creating a new class for every little thing you want to apply style-wise on a page and this is very common like um when i was working with folks early on who didn't kind of understand global classes you just go in you start okay i want something to do something i give almost like layers in photoshop right i just give it a name and i'll just start naming all these different divs and next thing you know you have a it looks organized because you know like you called everything nicely but you got a million classes on a single page and it just yeah that can get complicated for sure especially when then you start editing on other pages and you don't realize what's happening and okay nice i think that's it great okay thank you everybody for hanging out and we'll be back next week yeah [Music] hello you

Channel: Finsweet

Views: 7,088

Keywords: webflow

Id: QJwkh-5XWXs

Length: 103min 40sec (6220 seconds)

Published: Thu Dec 09 2021