How To Add Shopify Product Filters & Search Filters To Your Store | Filter Search & Collections

all right, what's up guys? this is jake, and in this video, i'm going to be showing you how you can enhance the look and user experience of your store by enhancing the product filter and the product searching functionality on your website. so this is going to be really important because it has a huge impact on conversion rate. according to e-consultancy website, visitors that are performing searches on your website are going to be converting at a rate almost two times as high as the average website visitor. therefore, spending time maximizing the efficiency of this part of your store is going to yield huge dividends, moving forward for your profitability. so, that said, let's go ahead and jump right into it. so to do this, we're going to be using an app called product filter and search, which you can go ahead and get to by clicking the very first link in the description. so, before we actually get started with setting this up, we're going to go ahead and take a look at what it would actually look like once you set it up on your store. so if i come over here to a demo right here of the product filter and search app, we can see that this is what the app would actually look like in action on our store if we were searching for a partikular product. so so this is a product collection right here. so this is going to be what search results would look like and we can see here over here on the left we can see all of these different search options that are showing up through the product filter and search app. so we can see here that we can choose different collections here, so we can go ahead and choose between different options. you can also filter by multiple levels within collections here. so if you open up top, so we can see that there's different levels inside of the top, so these smaller collections inside of the overall tops collection, you can go ahead and filter by this as well, so you can have multi-level collection filtering. we can go ahead and filter by brands as well, so we can go ahead and choose which brands we want to go ahead and see showing up over here. we can go ahead and filter by different colors. we can actually see the little color swatches here that are showing up as well, which is a pretty cool visual feature- and we can sort by size as well as sorting by price. you can also filter by things like shape and filter by the ratings of the product as well, as well as the percent sale, and you can filter by stok status and, alongside that as well, you can also create custom range sliders, like the price one right here for any numeric values such as width or height. so any type of customization you want to do there you can go ahead and create. and a couple things that aren't seen here that you can also do is you can filter by tags and filter by meta fields as well. so this just gives you more options for customization of your product filtering process. so you'll notike- if you've ever actually done any online shopping on some of the bigger ecommerce retailers- you're going to notike- that many stores do have a system like this where you can go ahead and search through different products and collections and sort them all out by all of these different options here. so this is something that pretty much every store needs to have, especially if you have a very large catalog, because this is just going to make the search and filtering process for the customer 100 times easier, and the easier it is for the customer to find what they're looking for, the more likely they are to go ahead and buy. so there's a few customization options that we can actually do as well. so we can see that this is the vertikal layout. so if i come over here and switch to the horizontal layout, we can see that now that what it will go ahead and do is it would go ahead and put all of the different sorting options here on the top of our product instead of before they were on the left. now we can go ahead and click on these different options here and sort by these different options by clicking on them right here and clicking apply. there's also some other layouts that you can go ahead and use up here. so if we scroll over other, we can see there's other options right here. we can take a look at the off canvas one to see what this one looks like and we can see that this partikular layout actually puts the filtering options completely off the canvas. so if i go ahead and click on filter here, we can see that all of the filtering options now show up on the left side of the screen here in this scroll wheel. so which one you select is just going to depend on personal preference and which one you think actually looks the best in your store. and if we were to go ahead and compare the custom filter that we just went through right here with the default filter here that comes with any shopify theme, we can see that the shopify theme filter is definitely relatively basic when compared with the product filter that comes with product search and filter right here. so it's definitely a large boost when compared side by side. and then the other thing as well is the actual search bar itself. so we can see here that this is not the standard shopify search bar here. so if i were to come over here to a demo store really quick and now we're click on the search bar, we can see this is going to be the default search bar here. and if i just went ahead and typed in something, we can see that it's just going to show a couple of products. this is the default search bar. but if we come over here, we can see without typing anything in. we can see that the smart search is already showing us a lot of the popular searches here for the partikular store and it's showing us trending products as well. so it's showing us stuff before we even go ahead and type anything in. and then if i were to go ahead and start typing something in, we can see here that it's going to give us suggestions based on what we're typing and it's going to go ahead and show us different products that meet our search right here, as well as being able to view all of them if we choose. and if we go ahead and do that, we can see that we're going to be brought back to the same options as before, where we can further filter our options using these specific categories here on the left. so we can see right here that the menu is laid out like this by default, but there is a couple different layouts we can use. so if we go over here, we can do the standard one column and then if i click on this menu here, we can see that this is what the actual menu will look like now. and then if i click on it up here, we can see that now it just switches it to a vertikal one column with the searches here and the products down here. and if i were to click on full width here, we can see. if i were to go ahead and click on the menu now, we can see that this this turns the menu into a full width option here. so which options you choose is going to depend on which visual option you think fits with your store the most. so there's a lot of different customization that you can go ahead and use with this app. so what we're going to go ahead and do now is actually walk through how you can actually set this up very quickly on your own store. so once you go ahead and install the app here, you're gonna be brought to this page right here. so this is where we can go ahead and first select our layout. so this is what we already took a look at a couple minutes ago: what we can choose between whether we want the vertikal layout or the horizontal. so we can choose whether we want our category options here on the left or do we want our category options here on the top. so in this case, i'm going to select the vertikal layout, alright. so once that goes ahead and installs- which will take a couple of minutes here we'll see that it says setup complete and what it actually does is it goes ahead and creates the filter on a duplicated theme, just as a precautionary measure in case you want to go back to your old theme. so if i go ahead and click here on preview, here we can go ahead and take a l.

Shopify Dev Tips: Predictive Search

[Music]. hey everybody, i'm sam webb and this is shopify dev tips. today i want to show you how to implement predictive search on your shopify theme. so let's get started. first let me explain what predictive search is. if i go up here to the search bar and i type simple and i click enter, that's going to take me to the search page and it's going to show me everything that matches that search with the word simple. but as a customer, if i don't know the exact name of a product and i'm trying to quickly find it with a few different words, this method of typing in a full word or some letters and submitting the form and having a page refresh is slow and cumbersome and it might turn me away from shopping from your site altogether. predictive search streamlines this by showing the customer a few products that match what they've already typed in before hitting enter. so what you would see here normally is: i would type, i would type s-i-m-p-l-e, and then below this you have a box show up that would show this product and any other products that match that search. shopify has an api for this. it's called the predictive search api. i'll link this page in the description below, but this is the page that tells you exactly how you would reach that api endpoint and what comes back from those requests. shopify has also built a library called theme predictive search. that makes it really easy to interact with this api, and we're going to be using this library today. let's start writing a little bit of code. depending on your theme code, this is going to be different for everybody, but in my theme i have a section called headerliquid and within that file we find the search form. right here, right, build this form. i'm going to add a div. i gave the class predictive search and i'm going to give it a data attribute of predictive search. and this element serves two purposes. one, it's going to be the container that we use to position where our search results are displayed, and also, through javascript, it's the element that we're going to inject all of our search results into. now let's kill our terminal for a second. i'm going to run yarn, add theme predictive search and we can spin up our server again. now, hopping into the javascript, i'm going to make a component called predictive search and in theme i'm going to import predictive search from dot slash components predictive search, and i'm going to run predictive search and we're going to have an error because we don't have anything being exported currently, and so let's say const init equals a function and export that, and that fixes our error. now, if we look at the documentation, so let's first import predictive search and then let's create a predictive search and instance. if we look back at the documentation, there are two methods we can use here. so there's dot on and then there's dot query, and for dot on we have two functions. when we're passed to we want to pass a success function and an error function. so basically, when somebody makes a request and it's a success, then it will run this function, and if somebody makes a request and for some reason there's an error, then it will return this function. so let's grab both of these and add them in and let's say: for success we will consolelog word success and for an error we will console that log error. let's actually consoleerror and pass in the actual error and we'll pass in the json of a successful one. finally, if we go back to the documentation one more time, we'll see predictive searchquery, which is the function you run when you want the query to run. what will happen is we'll run this query and whatever the string is that's passed in here. that's what will be requested from shopify and then, based on what comes back, either if it's successful or an error, one of these two functions will run. so let's grab the query and then paste that in and let's change that to necklace. now, if we go back to our front end and we open up the console and refresh the page, we'll see we got success. and then we got a response. so we got resources with the query, necklace and resources has results, results has products, three and it has all three of our products right here. we don't want to just run this on page load and then have it load up in the console. we want it to be more dynamic. so if we hop back into the header, we find the actual input for search. let's add a data attribute to that data search bar. if we hop back in here, what we need to do is first grab this element- and just as a measure for safety, i like to make sure the element exists before i run any more functions on it. and now we want to add our event listener. so in this case we're going to add a key up event listener which basically says: on, key up, fire off some function. then what we're going to do is we're going to move this predictive search within there. now if we go back to the front end and refresh the page, we'll see that it didn't run automatikally. and if we start typing in here, we see we get all these successes and it's the query is necklace every time. but we don't want the query to be necklace every time, we want to be whatever we type. so right now, if i type simple again, you'll see that every time i've done that i've gotten back a query for necklace. now one way to do this is to pass in the event and grab the target of the event. but since there's only one search element that we're doing this on, we don't need to pass that in. we can just use the search object that we already have access to. so let's replace necklace with search dot value. now you can see as i type necklace over on the side here. you'll see that you start off with n, then n, e and e, c and e, c, k, right all the way up to necklace, and it's always returning some sort of object. now, before we go any further, i actually want to go back a bit and explain this predictive search class right here. so what we have here is a class that takes an object and it takes a few properties. first we've got this search path, which is already stored in predictive search, and so it's being passed in right here. and then we've got resources. so the type of resource we're passing in, or the types, would be an array of different resource types. as you can see, here we're only passing in the product type. we've got a limit, so limit is going to be how many of these items are going to be displayed. so we're only doing four, and you've got some extra options. so the first one we're using here is unavailable products. so this is what will happen: if products are unavailable that show up in the in the search, and we have last here, which means they'll just show up after all the other ones. and then, finally, we've got this fields array, which determines what fields are going to be looked at when it's doing a search, right, so it's going to look at the title, it's going to look at the product type and it's going to look at a variant title to try and figure out if there are any matches for our search. so there's obviously more that you can add in here to make this more custom to your needs, and you'll just want to look at the documentation to figure out exactly what you can do. now, back to where we left off. we've already gotten to a point where we can type into our search bar, and whatever value is within that search bar will be queried for predictive search. the last thing we need to do is display to the customer those items that come back, and so that's going to happen inside of the on function, and so here's what we need to do: we need to loop over the products, we need to create html elements for all those products, and then we need to append those to the dom. now, this is a lot of code to write, so what i'm going to do is write it all out and then i'll explain it afterwards. all right, now that the code has been written, let's take a look. so i go up to this search bar and i type in simple. you can see how it's changing, right? so when i type the forward simple, we've got just this one product, but as i delete characters again and get back to just the si, that matches all three products, and so you'll.

More:Get Paid To Have Fun Conversations With People! (VERY EASY)

How To ADD Smart Search Bar In Shopify 🎁 Best Shopify Instead Search Bar App

hi Lea, welcome to my channel. in this episode I am going to tok about a very popular trending app app, Shopify. so this act name is smart, certain standards and this is very popular right now in the Shopify and, of course, very useful for any online store. if you look at here right a look at the review, I it got nine hundred plus review and the rating is very impressive: 4.9 RL on five. so everyone using this app to make their website more smart and more user-friendly experience. I'm going to review about this app and I will show you how you can install this app in your one last room. and, of course, this to true only for beginner, who are very beginner and wanted to learn to show five basic and wanted to start their one on business on Shopify. so that is very. first of all, let's check the this plugin cost. it has 14 days free trial and additional charge maybe apply. so you're not going to get this plug-in fully free. you only get as a trial for 14 days or two weeks and the piece charge is very impressive. but we are going to know more about this much. source: an instant search. the most reboots are SEP for Shopify and shop. you have plus. well, of course, this is the most tribute search. we- if you check again the review, you can see this one: Google search abs in the Shopify and choppy wave plus an all-in-one advanced assertion, saw the solution helping to transit range of paying customer and of course this picture increase your business and makes just on your visitor and they get a very either friendly experience and definitely they will try to buy more product when they get more fixable - bouncing your voice site and getting getting no more product from your voice site. so let know more about this. is Smart Search app is different: unlimited number of searches per month, real time products surrounding and categories index, all-time analytiks, mobile responsiveness. so this will zoom while responsible, and oh yeah, I think it will be. take a lot of time to describe everything, but I hope you can check this app and read about the is motors and sensors and I am going to check the air media gallery and here we can know more about this app visually. so first of all, I'm going to open the first image here. so instant product review, search suggestion and misspelling check, light fries in history, status and product review. so everything we are going to in the search field that actually anyone wanted in any voice said. but if you want all the P chart a trance, you must have to use this app because basically, your oil said does not provide such information and people not get to inspire it to buy anything so quickly when they get everything so easily. there must be click on the product and there will be from your website. okay, so little. get in the next as your customer type in the search box, searching, show relevant product categories and paste in the single with it. okay, so this has works. our search has not only show the product, it also show relevant product categories and page. so visitor gate, get a comfortable environment to browse your way set and by any power to check a new product and unlimited number of customizable filter. you can add unlimited customizable filter, price ability, band or product tribe, tag and review based on them and up and cross selling tools you can understand to block. that can be used on any page of your sister. and finally, you get a analytiks dead book dashboard with detail its report for in your online store and you cannot recommendation move that to your store font without changing your theme or file. so you no need to change your theme or file to use this app. you can do this easily and, finally, this is absolutely responsive and mobile present. illustrate: ok, so now we are going to using, are installing, this app in our only source of estoppel. I'm going to log in my shop around store, Shopify, then going to click on the login button. now going to click on my offset name- okay, we have a lager jinnah in my website. now going to click on the apps, then going to click on the visit - Shopify, a visitor button. then we will charge this app in the App Store, will type the app name right here in the search box and click on the search icon and we get our Search app right here, this one. I'm going to click on the title of this app, then going to click on the add app [Music]. okay, so we have added this app in our online store. now we have to install this app. so I'm going to click on the install app button right here. okay, so we have installed at this F. now we have to set up our app. so I'm going to click on the next button and we'll have to white before indexing. and this app right now analyze, analyzing my Georgia exit data. so I'm going to click on the next, then I'm going to click on the grid to- and this is our dashboard and this analytiks section and instead starts with it, from where we can add this one and such result with it through Florence, so you can check everything from here, all the pictures. so I'm going to click on the inter and click on de. it's looks good because I no need to contract with this app. so I'm even right now trial person for 14 days and here is my dashboard and analytiks. so I'm I'm not able to show this analytiks because I am using the trial version, so I'm going to click on the instead of starts with that, we can add this. I'll see that. you know voice ID enabled ancestors with it and you can customize. these steps are so that from here, like color content, ice-t go, is it? anything can change from here. also, they all have a translation option. you can translate it on your way and here the search result is that you can also change that designer customer. that isn't from here, without any coding school, just drag-and-drop entity and by clicking on your mouse. and finally, I want to click on the integration button. then we can know how to, how we can integrate others app right here. okay, so we have finished the installing of this app. now I'm going to visit my website, then click on the search button to check how this app actually working. so I'm going to click on the search button right here, then I will type anything. for example, I will type a product name. oh, that's amazeen. when I type anything, it's so me a lot of result right here. so thank you for your time to watch this video. if you like, add any pitch out like this and then definitely you can use this app. you know one land store and if you need- and I have relevant Shopify on Lester- then you can contract with me. I'm professional, working as a full time Shopify. I've developer. so thank you for your time again. don't forget to subscribe to my channel.

More:Earn $10 Per Day in 7 Minutes or Less Using Your Smartphone

How to Have a Mobile Friendly Search Bar on Supply Theme - Shopify

i am going to show you how do you make this search bar up top here mobile friendly. right now. if we make a resolution smaller, let me just go ahead and make it smaller right here. you'll see that the search bar actually goes away. we no longer see it in this navigation menu because the resolution is too small. but if you click into the menu right here, the menu button, then you'll get the search bar. what i'm going to do is it is mobile friendly tiknically, but what i'm going to do is, instead of requiring users to click into this menu button before they can search for an item or a product, i'm going to make it so that the search bar is always showing all right. so you either have it up top right here or we have it in the menu itself. i'll show you what i mean by that all right, i'm gonna go over to my shopify admin theme right here and in my supply theme. this is the theme that i'm using right now. so this is the supply theme. let me go into our actions, edit code and where we want to go into, or the file that we want to go into. it's not in our templates, but in our sections: category header. right here, this header file, right here. this is what controls the navigation up top. first things. first, i'm going to add at the very top here- i'll just show you very quickly, without any sort of styling: if you include search bar, this is a snippet that you can include and you save it, you refresh, you'll get it at the top, but we don't want this to always show. the only time we want this to show is when it gets to not even this resolution, when it gets to a really small resolution, so maybe your, your iphone, your android, so somebody who's on their phone. that's when we want to show this. so instead of having it show up in the actual navigation bar right here- i feel like that would be too small- i'm going to have it be full width down below right underneath it. that's the idea. all right, what i have to do is i have to give class. i'm going to add some styling so you don't actually have to create your own styling, your own classes. shopify has classes that allow you to hide and show based on the resolution, and this is all it is that it takes. right here is this large height, medium hide. make sure you have the, the double hyphens in there the minus symbols. all right, and let's just surround it with that refresh, it's gone right. so we don't see it in any large resolutions. but if we start getting smaller and smaller and smaller, it's still not there. we don't see it in there. but then when we go really small, that's when we'll see the search bar. all right, now what you can do. and chrome has this little nice feature where you can toggle by device. so if you're on an iphone 5 or se, you'll see it like this if you're on an iphone 6, 7 or 8 plus. but then the problem becomes when you have an ipad, the ipad pro- not a big deal because it's basically a monitor, that's how big it is. but if you click on ipad now, you don't see it. of course you can still see it in the menu, but you can still see it in the menu when you go to, say, the iphone 6 or 7 or 8.. you'll still see it in the menu as well. let's remove that, because we are now having the search bar show up on the home page always. let's remove that from the menu. how do you remove it from the menu if you scroll all the way down here in your header, header- liquid file line. right now it's on line 108. just remove that, save, refresh. you really don't need the search bar in two places. that's my opinion. if you want to leave it there, that's okay, but i'm gonna. i'm going to do that. now the problem becomes when we don't have the search bar now in the ipad. it's not in the menu because we just removed it. it's not here anymore. where is it? what we'll need to do is add some additional code right here and i'm going to just copy this: include search bar real quick and see where this mobile nav bar is. i'm going to add some code right in between these two display tables, alright, and i'm just going to add this very simply: class equals, and i'm going to say small, hide. i want to hide this, so when it's on small, i don't want to show this and save it just like that. now i added this additional div. i'll show you why i did that in a moment here. but if we refresh, we now see our search bar and it happens to be in between the menu and cart items. now this is looking pretty good. let me just go ahead and turn off this mobile device right here, that button. and if we start looking at the resolution, keep going, keep going. this is still a large resolution. now we get to the ipad, we see the search bar pop up. it's hard to see, so you'll have to do your own styling for the search bar. or maybe you have different colors for your, your menu item here or your menu bar right here. so that might not be so bad. it might not look as bad as mine does, but then if we keep going smaller and smaller, we still see it. so it should be gone with a small height. now let's see why it's not doing that. it's not doing that because i don't have the double hyphens in there. so let's just save that refresh. there you go. now it's gone, all right. so i had a little bit of a typo in there and then again we don't see it in our menu item anymore. perfect, now it doesn't look the greatest, not yet right here. let's make this a little bit more centered. what you can do in here- that's why i have this additional div in here- is you can add some styling. i'm just going to add the styling right here. if you want to create your own class for this, your own css class, you can't. i'm just going to add this very simple margin, top 10 pixels, just for the sake of getting that centered. there we have it now looks more centered. if you click on the menu, it still looks. okay. scroll the way down, it's still not there. but we see it at a full width right here and then it's gone once we get to basically a monitor when you're non-mobile, and it should all still work. if we go over here and i just click on shirts or type in shirts, you can't see it right now because it's in this, uh, in this menu bar, right here and again. if you want to change the styling, you can certainly do that. press enter. it does my search. doesn't really matter where i'm at. if i put in here shoes, it'll do that as well. alright, so that's how you make that search bar a little bit more mobile friendly. it tiknically was because of the menu item. it was showing up in here, but some folks would rather have this search bar always be shown, so that's what we did here, based on your resolution. it'll either be up top in the menu item or the menu bar itself, or, if it's really small, it'll just show up right underneath the menu bar. that's how you make your search bar mobile friendly.

Setup Autocomplete Search Bars | Shopify Tutorial

this tutorial is powered by askquesticom. get help with your website on demand and don't forget subscribe for more tutorials. how to autokomplete for search box. so i'm giving you an example how to do that. before going ahead. i'm just taking one reference store. that is 12x12 card stok shop. let me just log into the store. so our desire is, when we are searching something in the search box, the relative product or pages should come up. i am just giving you an example. suppose i am searching for blue, look cardstok. so just type blue and let's see what is happening over here. so here you can see all the suggestions that is related to blue is coming up in this box. so i'm showing you now how i have done this in the website. to do that, i have used one app that is such nice app. this is the app smart search and instant search, which is made by such nice. you can see the name over here. now, over here, what are the things you need to do? you just need to install in your site and that's it. everything will be taken care by itself. now there are few plans available and many options are there, so i'm just going all the options one by one. so first i will show you how to install this in your site. to do that, i'm just taking one development store and installing this into that one. so consider this is the demo store where i'm working right now and let's see. to install this app we need to go to the app section. visit app store. find the app smart search. this is the first one that you need to install. click on at app. click on install app. if you want to take some help from it, you can do the quick tool or you can start without tool now over here. you just need to give some time to sync all the product with this app. as there is very small product, it automatikally syncs with all the product from our store. if it is not like you have very uh, like more than 10 000 products or like 20 000 products, then you should give some time to sync your uh store product to this app. once the sync pronunciation is done, you can see the result over here. you will get the api key and you can see the status of it. if it is processing, then it will show like it is still processing. it is syncing with the store right now. if it is done, you can see it is up to date. now over here i am just going through few options. you can use filter option for the collection page. you can see already- there are few filter options. that is enabled- what this will do. this will do some options like the price filter. you can select some range of the pricing. uh, you can also choose the option like availability. i am showing how this options works in the live site. i am going to the collection page [Music] on the left hand side. you can see all the collection features are there, like the color, by the product type, by the vendor, by the collection and all. it is totally up to you. what are the features you want to add. so these are the small features. i'm not going deeper into it, so let's focus to the search section. so once i have installed all this thing in this new, new store, let's see how it is coming. uh, here are only three products available. so let's see if i type by t-shirt for the suggestions i'm getting. once i type t, you can see the suggestions is coming as t-shirts. i can choose any one of them, select any product of it and you will get the product page. now few more things i'm just telling you regarding this thing. this app is not free. it is running in the store as trial based. you can see. if you just go to the app section, you can see the trial option. here you can see it is the. it is in trial mode. so now i am going uh some giving some information regarding to this app. to do that, i am just opening this in app store over here. i am just showing you, uh, the pricing of the store, because pricing is very important and it is relative to the number of product that you have. so up to the 25 product, it is free. if you have more than 25 product, then it is chargeable. i am showing you the chart where you can get the clear view how much it is charging you exactly. if you are going annually, this is the charge rate. so, uh, up to 25 product, it is free. up to 500, you will be charged like 6.3 dollar per month. so if you go monthly, not annually, then you the charges will be increased a bit. here you can see it is nine dollar per month for 500 product, 18 per month for 5000 products and there are lots of features which is not available in the free version, you can see it is also available in the paid version, like the category pages which i have shown you over here, the collection page or the category pages. so this type of features is not available in free, but if you are in the paid version, any of this paid version will have all the options like this. so i think i have covered this thing and i will also show you a few other apps that is showing the same option like this. you can find the another app that is live search, which is doing similar type of thing but not so much powerful, like this. this is one of the app i love this most. these two the same thing. like this app i'm just showing you here. the pricing is 39.99. it is quite uh, less than this app. like the minimum charge is nine dollar in paid version. but in the live search it is doing only the search. no other option is there, like the filters, the collection page, the synonyms and all. so this is quite easy to use and the price is quite less. you can see that example store how it is working. consider, i'm finding class over here. see all the related things: the collection, the blogs, the products. all are coming in one shot. if i click any one of them, i will directly landing to that partikular product page or the collection page. okay, so i think that is quite good. using this app, you can easily achieve this such thing, the automatik search thing. so thank you, thanks for watching. if this was helpful, please subscribe, and if you need extra help, visit askquestcom and send us your questions.

How To Customize Your Shopify Search Results.

hello everyone. my name is lip, as you know. here, i'm sure, about how we can, how we can customize our theme and create, create new one from scratch. so far we have completed everything about our theme. so last time we have worked on our search popup. in just a second, let me open my theme. last time we have created this form where user can search a product. so for the timing, let's try search answer here. our search page is not looking good because it survived home without any thing. so we are going to customize this one today. so, before any delay, let's start working on this. so, first thing, i'm going to open my visual studio pod. let's move this one up a bit, so so that you can see what's going on in the screen. the next thing i'm going to open is: uh, before that let's login. first of all, let me check each account i have logged in. am i okay? so i'm right. one next thing i'm going to do. you could say show file [Applause]. so okay, so it's up. now let's open this one. by the way, i just updated my shopify cli. i was at three point, sorry, 2.90 around, so i have updated to 20. so let's open this one. our development environment. this will be our preview and this will be our editor. okay, so next thing, i'm going to open search template. let's open this one. and next thing i'm going to do i'm going to create search liquid and let's copy all this from here over here and remove our search template, because i'm going to change this one to json one, so let's it's deleted. let's create new search dot json and here will be our json. the first thing will be name. name will be search template, then sections. before that, let's change to discord. this will be add array, just like this one. if the next thing will be a banner, so i'm going to copy all this and paste here, because we need a banner. the next thing will be our main main will be type: i will be our templates name, which satisfaction's name, which is search template, and then order. okay, so that's all we need. unexpected error: where is it? [Music]? okay, so, maybe because of this [Music]. okay, so our search template is up now [Music]. let's refresh this [Music]. so this should be not in pages. there should be others. yep, there it is and [Music]. this is search [Music]. so now we got our winner and search template: [Music]. right now we have our search form [Music]. as you can see, we got our output also [Music]. let's see here also [Music]. so we got our template, this one, so we don't need this one. so here is our search types. so research, search items. so let's say here: [Music]. i think i'm going to check other pages. yup, this one, i'm going to pick this one. so everything will be same, like this one, like collection page, but there will be a bit different, uh, difference. let me just copy that, that one first, and that's our container, so let's copy. the next thing will be your phone. i'm going to keep this one as it is. then there will be [Music], a row, [Music], this one, [Applause], [Music], and in this row let's put these settings too. we don't need add to part, we don't need title, this one, this one, we are going to copy this, just only this one. and schema search settings are setting [Music]. okay, so we are good to go. let's copy this and paste here. so what i'm going to do, we are going to change our items, this one and this one also. we are going to change our pagination too. so for pagination, we have nothing to do this extra. let's copy this and paste here. okay, so everything is in our container, so this is less like our collection page. and we got our pagination container and there is hidden uh, product- sorry, pagination input, and then we got a load more. we don't need that one and remove this, and we also don't need this one because he was working on load mode based on that. so next thing is our lc1. if nothing is found, there will be a message: we you looking, i think that's it. the next thing will be uh and this row and paste here. so we are going to remove extra things from here. first thing, we need product container. this is our for image and that's our title and that's our price. so so this one is our okay, so we got everything over here. [Music], but i think there's something happening over here, so let's check this right. this one also working, okay, so this one is looking a bit different. [Music]. there's r and four [Music], okay, so we have to shift this. now everything looks good, so let's save this one and check this. so here is problem which is starting from here. first of all, let's resolve our product dot will be our item, so i'm going to select all products and paste very place with our item. so [Music], there was the product dot url. now we got our item dot url. same thing goes with other same a title, featured image and so on. so let's right now online number 60. there is problem which is saying product must form given product: [Music]. while it's looping again and again [Music]. it's happening because of this. let's connect this one, so you want this one and save it. let's search it again because it will bring our page also [Music]. so there is a mistake over here. it's saying: and issue the item and save it again [Music]. so now our activator button is back. as you can see, we got our product page also here, but we don't have our featured image. that's landing page. so we don't have any option for um, the featured image for product. but we can also create, let's say this one product and save [Music]. so let's try now. so we got our diplo diplomat also, but it's not getting our image. same goes with our page two, so let's fix that one. so first thing i'm going to do, i'm going to stay. let's see this one first off. oh, let's check what we got here. we type so we can type and this will let you. let us know what is the item type, its product, blog post or it's a page. so now they change to object type. so let's check this one with our object type, then refresh. so for first one we got our artikle, second one for product and for the last one we got page. so first thing, first, if object type is product door- and if i'm going to copy this one because i'm going to use this multiple times- if our product type is object product type, then i want to show this one. the next thing is a title. this one also i'm going to stik for our product. only same goes with form 2.. okay, so we got, when we fixed our this one, why it's still there [Music]. so we go, uh, liquid error. the next thing: i'm going to change the image of page and artikle, because right now it's not picking artikles image. so let's say i'm going to liquid object also. okay, so we have image for our table, [Music]. so [Music]. over here. let's remove this. i'm going to assign a variable here. before that let's start liquid. so i'm going to say assign. let's call this one english. by default, this will be our featured image. so if it's active, [Music], yes, [Music], peace else. and if if it's artikle, then this should be image. if it's a product page, then i'm going to do: let's find [Music] resources. you may just [Applause] [Music], [Music], um, [Music]. yep, in this one, [Music]. let's try this one again, also here: [Music]. okay, so this will not work, so we have to do a workaround, so so. so if there is page, then it will show this ssvg image, otherwise this will show our images. and one more thing i'm going to do: [Music]. what image? let's cut this part if inc, dot, src is equal to, and then this will show the image. and based on this, we can do like: let's go to applicationcss file [Music], position, absolutely same goes with it [Music]- and save it again [Music]. so let's see [Music]. translate minus 50 percent [Music] and fifty percent [Music]. oops, they should tok [Music]. so now we got our placeholder image, but i'm going to change this one to something else: [Music]. by the way, you can add classes over here if you like. looks like we don't have much choice. so [Music], let's copy this. i think we should keep this one as it is, [Music], and i'm going to add, unless here, [Music], unless it's not equal to [Music], so [Music], so [Music]. this is [Music], so let's try again. okay, so we got our clean image edge without any place order behind. so if i'm going to test here, let's say cache [Music.