BACK

how to add filter or sort shopify

How To Add Product Filtering in Shopify OS 2.0 All everyone,,Christian here,with the newer,,also one

BitBranding

Updated on Mar 07,2023

How To Add Product Filtering in Shopify OS 2.0

The above is a brief introduction to how to add filter or sort shopify

Let's move on to the first section of how to add filter or sort shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

how to add filter or sort shopify catalogs

How To Add Product Filtering in Shopify OS 2.0

All everyone,,Christian here,with the newer,,also one of,the themes,Shopify has added,,the ability,to add storefront,filtering on,your collection,and search pages,,so I'm,going to show you,how to add,both default,and custom filters,to your store.,Let's get started.,Now, I don't know,about you,,but I like,filtering stuff.,I like,organized things,,I like to,know exactly,what I'm,looking for,by using filters,and your audience,are your customers.,They do, too.,So are storefront,filters,allow you to set up,product filtering,again on your search,and collection,pages.,So when you enable,filtering,,customers,can actually filter,by availability,,product type, color,and filter,those results,to find,the actual products,that interest them,the most.,So first thing,that you need to do,is to check,if your,theme actually,supports filtering.,So if we,go over here,to our online store,and then we're,on their themes,,we see that,right now we have the,venture theme,,the nine point,4.1 version.,Now let's go,to navigation here.,And then right here,under menus,,you'll see this,new collection,and search filters.,And as you can see,,it gives you,a message,that says the current theme,doesn't support,filters, and that's,because you need,the most current,OS 2.0 theme.,If we go to,the theme store.,And let's go,by all themes,,you'll see that,now they have all,these new badges,with oaths,to point out,,I believe they've,updated,all of them.,So all you have,to do is just make sure,actually know,there's this one,right here,that is not updated.,But I would say,99% of them,are updated,to the oath,,do point out.,So,if you don't,have an oath,,when I highly suggest,that you,upgrade to an oath,to join with me,now, step,number two,is going to be,enabling the,default filters.,So what we're,going to do,actually,is we're going to,switch the,theme out,for an oath,to point,out a theme.,So we have,the dawn theme,over here,and I click on,Actions Publish,so that,this will,be our main,theme right now.,And then if we go,back to navigation,,we'll see that,that message,is gone right now.,Now, before,we enable,the default,filters,,I just want say we,many of those.,My name is Christian,Pinyon,,one of the co-founders here,at their branding,,where an E!,Commerce,growth agency,that specializes,in helping clothing,stores,grow and scale,properly online.,We dropped,new videos,every week,,so make sure,they hit the subscribe,button and turn,on notifications,so you don't,miss out.,All right,,so right off,the gate,,we have this style,one in there,and I'm going,to get rid of it,when I click Save.,And then I'm,also going,to open a new tab,with our store.,I'm going to go to catalog.,Let's go to the bones,here.,And as you can see,,there is,no filtering.,There is,sorting on this,right hand side,over here,,so you can store,by features,bestseller.,That's not exactly,what we want.,We want the,actual filtering.,So as,you can see right,now, there's no active filters,,but all,we have to do,is add filters,and then,these are going,to be the,so anything,under products,and product,options.,These are going to be,your sort,of default,filters, right?,Some things,that already come,by just,,you know, you adding,products,to your store,so you can do,availability, price,type, vendor,color and size.,Now, color and size,have been added.,You might see something,different here.,These have been added,because we have,variants,for color and size,in our store.,You may have,some other types,of variants,and these product,options will change,right there.,But as a default,,you'll have these,top four,right here.,So we're going to enable,all those,actually listening,to all of them.,I will say that,you can enable,I believe,it's up to 24,different filters,,so you can do a lot,with these,new filters.,Now we're going to ignore,that one of,the Medfield,,because the Medfield,is going to be,the custom filters,that are going,to show you,how to do here in,a second.,Someone click Done.,Click Save,on that.,And then let's go,back to our store,here.,Refresh this page,,and as you can see,,we have the filtering,by availability,,so in stock,,out of stock,,by price,is very powerful.,You can do buy,price range.,So and,actually tells you,the highest priced,is 6798.,It's a pretty cool,product type.,So let's say,this was a collection,that had a lot,of different things,you could do.,You know,,shirts, pants,,sunglasses,,accessories,,et cetera,,by brand.,So we have a lot,of different brands,and we actually use,your vendors.,Then you can do,filtering by brand,,by color,,have them,blue, black, orange,and then,finally by size.,Now I will say that,by playing around,with this,,the filters change,depending on,the collection,that you're on.,So, for example,,we're in the,Barnes collection,and we have these,sizing options,right here available.,But if you were in,a completely,different collection,than the pricing,will adjust,to that collection,and the products,are inside of that,collection only.,So before,,when you were doing,filters in older,stores,,you would have,the whole gamut,of every,single size,out there,on the whole store.,So this is a little,bit of smarter,filtering,,if you will.,So,I'll show you,if we click on,some of these,actually let me do,medium. OK.,So you see a,refresh of the page,and it tells,you right here,,what are the filters,that you have,enabled?,Right now, we just,only have medium.,And you can,stack these,so by product type.,So now,we have medium,and that,you can click,on the X,to get rid of that,to sort of,narrow down,exactly what,you want.,You can click,clear all,,and I will show you,the whole list.,So pretty handy.,Hey, I would,just like to,tell you that,if you,like what you see,on this video,so far,,consider clicking,that like button,will help with that.,All right.,So the next step,is to,figure out,how to add these,custom filters,that custom,filters work,with the,midfielder.,If you haven't,checked out,the video that we,made on,Meadow Fields,,please do,so right here.,That will explain,a little,bit further,into the actual,metal field,and how to,create them,and just talk,a little bit more on that.,But for the,purpose of this,,we're going to,create a Menifield,so that,we can create,a custom,filter here.,All right.,So what,we're going to do,is we're gonna go,to settings,,then we're going,to go to Merrifield,on the left,hand side,,and then it'll give,you options,to do either,product,variance,collection. The customers,orders,you for the,filtering options,,so you'll probably be,under products,or variance.,I did a variant one,just to,test something,,which I'm going to,show you here,in a second.,But let's go,to products here,and then,we're going,to click on,add a definition.,So let's say that,you wanted,to create,something like,the style.,OK,,so we can name,that style,,and we'll just,click on that,very top one.,You don't have,to do this,suggests at once.,So you're creating,a new one,,so style.,And then,you can do a,description again,just for more,internal purposes,,and then,you can select,a content type.,So for style,,I just want it,to be plain text,,but you do,have some other,options in here,when it comes,to filtering.,So I can do,plain text,and I'm going to do,just a single line,of text,and invalidation.,I don't need,to do that,right now,,so I click on Save.,OK, so we have the,style set,up for products,,so the way,that works is,now that we have,that in there,,I'm going to exit,out of the,settings.,And when to go,to products,,then let's do,dry bones here.,Now, when you click,on your,actual products,and you scroll,all the way,to the bottom,,you'll see that,metal fields,will show up.,And then,the one,that we created,just now,,style will show up,right here.,So for style,,let's say,let's pretend that,these are maybe.,For him.,Like style,for him,or for her, right?,When I click on,save on that one.,OK.,Now that we have,that set up,in there,,then we can go back,to our online,store navigation,and then instead of,here, we can,add a filter,and then you'll,see that here,under a midfield,,there's the variant one,that I created earlier,,which I haven't,really shown you,yet on this video.,I was just,testing it around.,But the one,that we created,right now,is for the,product Medfield,,and that's the one.,So I'm going,to click,Check Mark,in that one,click done,and click Save.,Now we're going to go,back here.,I'm going to refresh this page,and you'll see that,style will show up,right here,,and then,you can click on the,for him,and we'll,see the drive,then show up here,when we do that .,But you can do that,custom filtering,for anything.,So let's say,that you have maybe,custom,dimensions or,basically,everything,,anything you can,think of.,You can do a filter,for now,,something that,it was a question,on a,different video,that I saw,on YouTube,,where,it was asking,,for example,,if you want,this dry bone,to show up on there,for him,and for her.,So you want,to show up,on both of those.,It's kind of tricky,because it doesn't,give you the ability,to do that,within the products.,So what I did was,I added the,custom filter,or the Medfield,to the variant,,and that's,what you saw,right over there.,So I'm going,to click on,,get rid of that one,and click on Save.,I'm going to show you,I want to go to,Settings, I'm,going to go to Medfield.,And then I clicked,on variants,and then I just did,the same thing,I just created.,I said style,,that's going to be,a single line,text, etc.,So nothing,really changed,from what I did,previously,,except for,at the very,first step.,I wanted,to do variants,,not the products.,So that means that,when you go to,products here,and we go,,for example,,color for bones,and color for bones,has different,variants,,depending on,the size,so small,,medium large.,So right now,,this matter,feels right here,for style,is the product,wide Medfield.,But if we go deeper,and we go to small,,for example,,we'll see that,this one,also has,a very,specific Medfield,right now is named,the same as style.,But as you can see,,we can do for him,on the small,and then the medium.,We could do the,for her.,So that means,that this product,will show up,under both,of those circumstances.,So it's just a,little workaround,to that,particular question,on how to achieve,the same product,for two different,options when,it comes to,the Menifield.,So let's,add that real quick,so we can see,how that looks.,So when we go to navigation,custom filters, I'm,going to add,the filter,and then,we're going to do,the variant one.,So I click,on style.,Done save.,Go back over here.,Refresh this,and then,now we go to do,you see we have the,for her and for him?,We can click,on for her,and the color,from don't show up.,We get rid,of that one.,We have a for him,and the same,product shows,up here.,So again,,got just a little workaround,so that you can,achieve that,if you have any,other scenarios,like that.,Let us know in the comments,below,,and we'll try to,find a solution,or some, maybe some,workaround,for that,specific situation.,OK, so,the last thing,that we have to do,is be able to edit,the way that,the filtering,system looks right,within the theme.,But before we,jump into that,,I just want,to let you know,a little secret,that data is,clean now.,More than ever,,you need to be able,to see your blind spots,and opportunities,in your business.,We found software,called Triple.,Well, you can see,the link below,that will literally,put all the,data points,that you need,to know about your business,into one place,so that every single day,you can see,what your gross,net profit,opportunities are,to continue,to grow,your clothing,store properly.,So check that out,below.,Now, the last thing,that we have here,is to be able,to manipulate,how this looks,a little bit right.,So in order,to do that again,,we want to go to,themes, customize,and that in here, I'm going,to go to the collection,page.,Default collection.,And then in here,,you should be,able to see,,let's see, grid.,So we have,filtering,searching,,so we have enable,filtering,so that one's,already checked,marked, it's,the beginning,of the video.,You did not see,your filtering,show up.,This is,where you will,enable it,right here,within your,your theme.,So for Don,,for example,,we can enable,filtering and then,let's see this one,,OK, we can,collapse it,into larger,screens,,so it looks a,little bit nicer,depending on,how many filters,we have,,depending on,your particular,theme.,You will have,the option to do,maybe a sidebar,theme,or just have it,right there.,Show up,at the very top.,It looks like,Dawn only offers,the top filtering,,sorting, sorting,and filtering,and then,for the ability,to collapse,on on,larger screens.,So if,we look at that,,it kind of,looks like,that sidebar,,but it comes as a,draw cart,right there.,So that's really nice.,I would definitely,recommend something,like that.,If you have,if you're closer,to that 24,filter option,metric that,they have.,So just click on,save on that.,Look at our store,here.,Refresh it,now we have,filter and sort,all combine,right here,what that drawer,looks.,Very nice.,All right.,That's all we have for today.,Again, if you have,any questions,,please let us know,in the comments,below.,We'd love to help,you and your store,be able to filter,in a little,bit better.,So let's now,see Linux on.

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

Come on and read the rest of the article!

Browse More Content