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 stok, out of stok. 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 tok 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

Shopify's New Storefront Filtering (Online Store 2.0)

so i thought i was done toking about online store 2.0, but it appears shopify included a new feature that didn't make it into the announcements at unite 2021.. i'm toking about storefront filtering. if you check out this page on shopify's official documentation toking about theme architecture versions, you'll see that online store 2.0 came with improvements like sections everywhere, enhanced app support and dynamic sources, but what they failed to mention in their unite 2021 announcements is this massive improvement to collection filtering. as you can see here on the documentation, we can now filter collections natively in shopify via availability, price, product type, vendor, variant, options and meta fields. so in this video we're going to explore this new feature and start to incorporate it into our themes. so to start off this video, i thought we would look at an example of storefront filtering, and what better example than the dawn theme, shopify's new default theme, which showcases a lot of the online store 2.0 features, including storefront filtering. so i'm going to click actions and then click view to view this dawn theme on my store, and then i'm going to navigate to a collection. i don't have it in my navigation at present, so i'm just going to navigate there directly in my url here and if i go down to here. i can see that we've got our new storefront filters so i can actually click here to filter via in stok, which all of them are in stok, so that's not really going to filter anything, but i can look at- you know- the brand and what sizes are available. the one that i think is most important and most exciting is the price filter. so now i can filter out. say, for instance, we got this insane shoes here which is eighty dollars if i was to put in a hundred dollar minimum. it's now looking at shoes from that 100 minimum up to 140, which is the maximum. so we're able to filter out that one. so obviously this is not the best example, because we've only got eight products and they all share similar prices. but for a bigger collection this price filtering would become very handy. the other thing i want you to notike here is that it reloads. this is not really relevant to product filtering, but in the dawn theme specifically you'll see that it updates instantly and i had somebody who commented on an earlier video make note of this and when i looked into the network tab i was able to see that we're reloading the whole section each time. so if i just refresh over here with my console open, opening up the network tab and then going over to fetch xhr to filter the network requests. and i go in here and filter. you can see we've made a new network request. i'll zoom in over here and then click on it and, as you can see well, not very clearly here, but you can see- we've got the query string parameters of, you know, first of all the greater than price of a hundred and some sort by. but we're actually pulling the whole section and we can see that if i open this up in a new tab, you can see, without the css which will get loaded or is already loaded on the page, we get the html for the section with the filter applied. i thought that was very interesting to note, not something we're going to implement in this video, but something interesting about dawn. so, of course, if you wanted to mimic dawn, you could do the same thing. i'm going to show you later in the video how i would do the asynchronous loading. it's going to be through my no layout hack which i showed you in an earlier video about how to create a collection api rather than loading up a html section. but i digress a little bit. we'll get to that eventually. what i'm going to do is click out of this. inside our store admin we can add or remove filters by heading over to navigation at the top of our navigation page. here obviously we've got the menus, but strangely enough we've also got collection and search filters here. as you can see, i've added some filters already. if i was to, let's say, remove some of them- like, let's say i'm removing size and i hit save, let me reopen that last tab and refresh. you can see size is now no longer in this bar. here for the filters, heading back over to here, i can add different ones. so i could do vendor brand- let's bring back size. hit done, hit save. head back over here and refresh. now you can see we've got brand filter and size filter. how this works is if i go into my themes here, go into the code for dawn and i look for the main collection template, which is in here- main collection product grid- and then i look at filters. you can see here that filters is actually an array on the collection object and i can cycle through them to get the different ones that are enabled on my store. okay, this is a bit of a complex example, but we're going to simplify it in this video also, i'm going to show you how you can grab an example from shopify to add filters to basically any site you want. but before we do that, i want to show you how these filters come through in the url structure. so if i head back here and let's do a filter again, let's put in a minimum price of a hundred, i want you to notike how something gets added to the url up here. now we have question mark filter v dot. price dot- gte, which means greater than or equal to 100, and then we've got the other filter here for price. we've got lte, which represents less than or equal to. so i wanted to show you that because it's important that it comes through as a url, because one thing it means is that we can reload the page with that url and we have the price filter applied, and it also means we can use that url to asynchronously load data in as well, which i'll show you at the end of this video. so i'm going to close that for now and i'm going to add product filters to another theme. in order to get some default code for storefront filters, i'm going to go into the official documentation for storefront filtering here. you can find it at shopifydev: themes- slash navigation, dash search, slash filtering. okay, so i encourage you to read this. all the information about storefront filtering is here, including how the logic is applied. so filters are applied with and logic, and within each filter group it's applying with an or logic. so you can read about that here. but what i want to draw your attention to is this example: right here. i'm going to click to copy it and then we can add this to any theme that we want. so i'm going to go into my theme library, scroll down to a simple theme, and what better simple theme than the one already called simple. so i'm going to duplicate that theme, but you can do this on any theme, just as long as it doesn't already have it. i'm going to rename this to simple with collection filters. then i'm going to go inside the code and let's create a snippet for these storefront filters. so i'm going to call this collection filters and then i'm just going to paste in that code, hit save and then i'm going to add that to the collection template. so heading up here to collectionliquid: this is a store created before online store 2.0, so we can insert liquid into the collection template. obviously you can. you can have a liquid collection template in any version of shopify, but commonly you'll find a collectionjson nowadays. anyway, side note over, i'm going to now add in that reference to that snippet. so render collection filters. hit save on that and then i'm going to open up a preview in the new tab. all right, i'm going to head back to that collection, which was collection shoes, and here you can see it's not formatted very nicely. it hasn't been affected by any css, but you can see here our list of different product filter options, so i can click on them and it opens up these kind of expandables. and i can do the same thing as i did on the dawn theme. i can apply a filter of 100 to 140 which filters out the insane shoes which, if you remember, were eighty dollars. okay. so adding product filters to your theme, whether it was created before unite 2021 or after, is pretty easy. we can just copy this filter display from shopify and paste it. i.

More:🔥 TOP 10 ALIEXPRESS HOT WINNNING DROPSHIPPING PRODUCTS

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.

More:HAUL DÉCO - Casa, Fly, Action, Yankee Candle... | Laura Makeuptips

Product filtering in Shopify is easy! (Development tutorial)

[Music]- foreign [Music]. what's up, YouTube? Welcome Back to another edition of coding with Robbie. I'm your host, Robbie, and in this video we're going to be covering filtering and Shopify. so this has been a highly requested video and one that I've kind of been dodging, because I don't like filtering in Shopify. it's never been fun and it's always been kind of kind of weak in what they allow you to do up until recently. so they recently expanded upon it and it's a whole lot better now. so I'm going to show you the Legacy way that it was done and then I'm going to show you the new way that it's done. and, uh, I hope you like this video. so make sure to like, subscribe, leave a comment and we'll get into it right now. all right, so real quick, I'm going to show you the old school way of filtering, and this is just for informational purposes. it's not recommended anymore. but right here I got a basic collection page and I'm just on slash collection, slash all, and yes, I want to filter this list. uh, you can only do it on tags. so, say I wanted products tagged with shirt, I would just add slash shirt to the URL. and now I got all the products tagged with shirt and say I want products tagged with shirt and also men. I could add Plus Men. and now I got shirts, uh, that are tagged with shirt and also men, and that's all you could do. there's no way to add any logic to it or do anything more advanced. so say I wanted save products that are either blue or red. it's impossible to do it. there's no way to do or uh with this method. so this is how filtering was for years in Shopify- probably 10 years up until recently. and uh, yeah, in the past he had to depend on third-party apps and there's a bunch of them and they kind of just gave you a big monstrosity of a page that was hard to customize and they often wouldn't work with other third-party apps. so I wouldn't recommend using any of those. and, um, yeah, you'd basically just build an interface that would modify the URL and redirect the user. um, but yeah, they completely kind of reworked filtering as of recently and it's a whole lot better. now there's a whole new language you can add to the URL or you can do less than greater than this. that is a lot better. and they added an app- that kind of AIDS- with it. so we have the Shopify search and Discovery app and it's super easy to use and, yeah, I'm going to show you how to use it right now, so let's go alright. so good news, guys. the new filtering method is much easier to use and, uh, significantly better. so I'll link this page in the video description. but here's the documentation page for storefront filtering and if you scroll down on this page, they give you a big snippet right here and we can actually just copy this entire snippet. so let's go ahead and grab that and then we can add this to our collection template. so let's go in vs code and, uh, I'm on my collection template. I'm just going to paste it right below my sorting select box, right there. hit save and now we're ready to use the search and, uh, what do they call it? search and Discovery app? so if you open up the app, you can just scroll down and go to customize collection and search filters, go to VM filters and then go to add filters and now we just add what we want users to be able to filter based on. so let's go- availability, price and color, hit save and- uh, that's pretty much it. now we can go back to our storefront and we're on the collection page right here and if I refresh, it's going to show those filters that we just added. so now I can go, hey, just give me products that are in stok and apply. and then I go, hey, price, actually I just want products that are 50 or cheaper hit apply. and I go, hey, you know what? actually, just give me products that are matte, black or red and it's going to do all that. and uh, yeah, it gives you a cool little area. these would look like tags. if they're styled with little X's next to them. you can just click the X to clear a filter that you applied. so, say, I didn't want to Red anymore, I can get rid of that. say, I didn't want filter on color at all, I could click that. and say, I just want to clear everything. there's a clear all button and uh, yeah, so that's pretty cool. and if you want the filter based on meta Fields, you can do that too. so let me show you that. so first we have to add some meta field. so let's go to settings and we'll go to meta fields. and then let's go product and let's add a definition. let's just call it. I don't know, maybe the product is recycled material or something. let's call it recycled. and then, uh, let's expose it and let's select the type. so let's just do a true or false, hit, save. and now let's go to our products and make some of them recycled. so maybe the blue shirt is the only recycled product. so we can go down here and select true and then save. and now we should have that meta field available to us, the filter based on. so let's go back to the app and scroll down, go back to filters, let's go edit filters and now you can see we have the meta field down here, so we can add that. so we'll add a recycled filter. and now we can go back to our storefront and it should appear. and, uh, did it work? so I might just take a second to appear. let's see, oh, it's right here, recycled. so now I can go: yeah, give me recycled products and we get that blue shirt. it's a pretty neat and definitely a much better system. and uh, yeah, if you wanted to build something custom, it looks like it does- just edit the URL so you can maybe dig into that. uh, but that would be more advanced and I think the snippet kind of handles what you would use it for. so if we do go to the code and take a look at it, it basically it just Loops through everything. so, right here, it's just looping through all the active tags, I guess, and it's just building all those options for everything. so really, it's just a matter of styling this to your needs and, um, yeah, it's a nice short and sweet video, but I hope you enjoyed this and I hope maybe you didn't know about the filtering app and this helps you in some way. hey, thanks for watching Everybody. if you enjoyed this video, you can click the icon in the middle of the screen to subscribe, and there's a couple videos on the right for you to check out. until next time, bye.

How to set up collection filters Shopify Search & Discovery

how's it going? everyone, welcome this video tutorial. my name is Mitch and I'm part of the content creation team here at clean canvas, and in today's tutorial I'm going to show you how you can set up your filters in your Shopify OS 2 store. so Shopify have redone filters and since updating os2- I had a video on this before, but actually they've made some changes to the UI so I want to make an updated version just so everything is in line going forward. so I'm on my collection page over here right now and you can see if I open up my filters. I can see the filters I currently have, the most commonly one, Shopify sort by the out of stok, which is one that Shopify introduced in os2, along with price, which they introduced in os2, which is really really great, because you couldn't filter by price before, but now you can, and here we can see product type and we can actually see color here, and this is actually pulling from my variance, which is great. so you can now filter by variance and I'll show you how that all works. today I'm demoing this on our latest theme mode that just released as of recording this set in the first week of September. so if you're curious about this and be sure to check it out in the Shopify theme store if you're looking to update your theme. but in here, if you click on collection Pages, you'll see where it's enabled- the filters over here and on our themes. we have a link here to just go over and quickly customize the filters. but if you don't have our theme, you'll find this underneath navigation and once you do, you're going to see that you used to be able to filter them all over here before, but Shopify have introduced this new app, Shopify search and Discovery. it's a really cool app. I suggest checking it out. I'll probably make videos about it in the future, but here's where you're going to find where you can view the filters and in here you can now see currently the filters that I have. I have availability, price, product type and color. so if I switch back here and open up the filters, you can see. that's how it's lined out here. if I wanted to not show any of these filters, I would just click on the X and click save and that will not display them anymore. or if I want to swap them around, you can see here. if I grab and pull it up and down, I can swap them around in the orders. if I want to add new filters, I will click on edit filters over here in the top right corner and here you can see see also which ones we have enabled and which ones are not enabled. now we don't have too many here, but here the default ones here from Shopify. so if I want to show the vendor brand I would click that and then the vendor would start displaying the filter page. Now, product options is really really cool. this is actually product variance, pretty much. so here it's showing me all the variants that can detect from all my products in my theme and I can enable the size variant and if I do, then it's going to show all the sizes of my products here in the filter bar. now I'll actually give you a really good tip which is very important. so sometimes it's very not uncommon that you might have a lot of products and sometimes your products might have different named variants that are actually still the same variant. so example would be: some variants might say color with the U, and then it's not uncommon where some people might spell color like this. I would highly suggest, if you have the case where color is spelled both ways, go and change your product variance to be one specific naming convention. because because if you don't do that and you enable, say, color here and color with just o o r, at the end you're going to show two filters here. it's not going to combine them, unfortunately. so very good tip there to do that same as well. sometimes people will put in their variant- and it'll be fine like this- and it's not uncommon- where you might actually add an extra space by mistake and you'll see and know that's the case, because here you'll see size twice and that means that you've added it with a space. so just go and check your variance and delete any that might have an extra space. it's just a little really tidy tool tip that I would definitely say to do to avoid any weirdness going on. um, but yeah, once you enable these and go to your collection page, that will show on all the collections- a really good thing to know as well. filters will only display filters that apply to that collection. so what I mean by that is everything I see here- applies to this collection. if I actually swap over to, say, a different collection which might have, you know, fewer products, it's going to show me fewer filters. so if I open up here, you can see we have a lot less filters, so let's call this like a smart filter function. it's really good because you don't want to be having people filtering with stuff that isn't relevant. now I'm also going to cover in separate videos a topic that a lot of people might have is: how do you create custom filters? I will have a link for when I post that video- comments below and also maybe a card in the top right corner of this. and then also people ask how to have out of stok be displayed as hidden. by default. Shopify don't have an option to do this in the editor here. we're hoping that they might add that in the future. but I do have a little bit of a hack that you can use and I'll create a video on that and I'll also link it below. so if you're curious, just check below and those will be there as well. and that pretty much covers it, guys. so thanks very much for watching the video. If it helped you, please do like and subscribe to channel, as we'll be releasing more video tutorials and with release updates for our themes and add new features. this will be a good way for you to know if we release anything new in a theme that you have. that could be pretty cool and that you really really like. let us know what you think and be sure to check out mode if you're curious about getting a new theme or any of our themes, which will also be linked below. but thanks again for watching and I hope you have yourself a great day.

How to Add Product Filter on Shopify | Filters on Collection Page | Shopify Theme Tutorial DIY

here is a simple method to add product filters to your shopify store. log in to the shopify dashboard. we are splitting this into two parts. first you need to add products with filters and then customize the product filters on the collection page. to begin, click products. from the left side of the dashboard you can see the list of all products you have already added. click add product from the top right corner. start adding the product information and provide all the related information about the product. fill up all the columns like price, media, description, title, quantity and all other information. below the shipping section you will find an options section. tik the box in that section and it expands a column to fill up the filter options. by default, on the options, name, the size, color, material and style are provided. you can pick from the option or provide an individual filter based on a product. also fill up the option values [Music]. now multiple variants are automatikally created based on the type of filters you provided. include the price and quantity of each variant and complete. do a quick check. if all the areas are filled, as of now, you don't need to add anything to the meta fields. click the save button from the bottom right corner. the product is successfully added and made active. click the back arrow to reach the product area to look out for the product you have added. click an ice symbol near it to preview the product. you can see that the product is included with all the filters. now we move on to the second step. from the dashboard. click the online store on the left side, followed by navigation. you will find filters on the bottom. by default, no filters will be added and click add filters to start adding them. choose all the filters from products and needed filters from product options. then click done and save it. then select the themes under the online store and click customize on the current theme on the customizer. by default it will be on the home page. select the home page at the top center. then it opens up the drop-down menu. from the drop-down menu, select the collections and pick the default template or any template you want to apply filters. now you can view the collection pages with all the filters here. on this collection page, the filters are hidden. if it is hidden on your site, then navigate to the left sidebar. click the i symbol to make it visible. now you can view that all the filters we provided initially are now available here. you can also hide the other blocks in this section. sometimes, based on the theme you are using, the list of functionalities and filter area could differ. now you can scroll and see all the filters on the collection page. if you want to remove any partikular filter from this collection page, then click the exit button from the left top corner and open it in a new tab. select the navigation menu under the online store on the left side. for example, i'm going to remove the price filter on the filter. remove the filters you don't want to show on the collection page. after removing it, click the save button from the bottom, then switch to the previous tab. save and reload the page. now you see that the pricing filter is removed. this is the simplest way to add product filters to the shopify store. [Music]- the number one single product shopify theme featured in envato tuts plus with more than 3 300 downloads. the boom shopify theme is trusted by customers worldwide for its easy customization and conversion-focused demos without any coding. you can build amazing websites like these. get all the 80 plus demos with a single purchase now create a gorgeous and powerful ecommerce store. today. the name is boom.