how to add search filter in shopify

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 particular 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 stock 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 notice if,you've ever actually done any online,shopping on some of the bigger ecommerce,retailers you're going to notice 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 vertical 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 particular,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,particular 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,vertical 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 vertical 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 vertical 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 look at what the actual,filter looks like,so we can see here this is what the,filter looks like now we went ahead and,put it on the left side so we can see,here we have these different options,right here and just for comparison this,is what the products page looked like,before where there was a couple filters,here but that's it,so we can see that this already looks a,lot better,and if we go ahead and compare the,search,we can go ahead and see that as soon as,i try and search and i type in c,right here we can see that it's going,ahead and suggesting different products,here that start with c so the candy corn,and the candy cane as well as it's,suggesting different collections and,it's also suggesting,a,page here that we have on our store that,starts with c and then we can see it's,also recommending us a bunch of,different products here and that's all,just from typing in the letter c,and if we compare that to the default,search here if i go ahead and type in c,we can see that,the functionality here has given us a,few recommendations but it's a lot more,basic than what you get with product,filter and search so we can see that all,of this stuff is set up and running,just in a couple of clicks so if we come,back over here,we can go ahead and verify the setup so,we can go ahead and say that it works so,i'm going to go ahead and click on next,and now i'm going to go ahead and go and,click on take me to the home page so now,we're on the actual home page here for,the app and this is where you can go,ahead and edit different things so the,first thing i do want to show you how to,do is if you want to go ahead and,publish this live,what you're going to want to go ahead,and do,is just make sure that the new,duplicated theme with the filter on it,is published live so in order to go,ahead and change your theme you can go,ahead,and come over here,to,online store i'm going to just open this,in a new tab really quick,and,we're going to go ahead and take a look,at themes here and we can see that the,theme that was just created here,so we can see that the live theme here,is taste but we can see that we have the,theme library so we can see here this is,the live theme with filter and search so,this is our same theme but just with the,filter and search so it's the preview,that we went ahead and set up so,whenever you want to go ahead and,actually publish this theme to have the,new filter and search go live you would,just go ahead go to actions here and,click on publish,and you can go ahead and click on,publish right here,and then we can see the theme is,published so now if i go ahead and view,this on the store,and we go to the catalog we can see that,this is now live if i open up the menu,here,and,i type in some search,queries again we can see that the new,search functionality is now pushed live,to our actual store,so jumping back in here to the filter,and search app really quick,we can go ahead and edit different,things if you want so by default,just from setting up and installing the,app we can see that we already have a,lot of functionality set up and a lot of,improvements for the customer user,experience just from installing the app,right out of the box so you don't have,to do any customization if you don't,want but if you want to set up different,things you can come in here,and you can choose to edit different,things in here so first it goes ahead,and suggests us to set up a filter tree,so if we go ahead and click create now,here we can see that we have the default,filter tree and the search filter tree,so the filter tree is just going to be,this section over here so this is the,what's known as the tree and then you,have the options of the tree here which,is like the vendor product type and,price,so this is where you can go ahead and,create custom trees and edit the actual,filter tree itself so if you don't want,to use the default one this is where you,could go ahead and add new ones,or edit some of these standard ones,if you come over here to search you can,see all of the different options here,for the actual search part of the app,here and by clicking on all of these,different ones you can go ahead and,change the different settings like we,were previewing earlier here as far as,the layout settings and you can choose,which display settings here you want to,go ahead and showcase in here,you can go ahead and go through all of,these search settings here and further,customize the app to your liking,you can also go in here to merchandising,where you can take a look and control,different things such as product,rankings so if you want to push certain,products harder than others you can go,ahead and edit that within here as well,and then you can also take a look at,your analytics so you can see all the,different metrics generated by the app,such as filter clicks and sales so this,is just a cool thing you can go ahead,and check on so you can see how well,your boosted search and product filter,functionality is actually performing,so this is a really great app to go,ahead and add to your store because as,you can see it adds a lot of additional,functionality to your search and product,filtering process which is going to,really improve the customer user,experience when they're looking and,browsing for products in your store,and all this happens in just a few,clicks and it's automatically set up on,your store so with that said be sure to,check out the product filter in search,app by clicking the first link in the,description down below and if you did,enjoy this video be sure to leave it a,thumbs up subscribe to this channel for,more videos and i'll see you guys in,another

Congratulation! You bave finally finished reading how to add search filter in shopify and believe you bave enougb understending how to add search filter in shopify

Come on and read the rest of the article!