Shopify And Or Filter on a Collection Page
Are you looking to implement an OR filter on Shopify's collection page? Are you having problems enhancing the way your customers filter or search for products on the collection page without using an app or maybe using your own design/branding?
Shopify's default filter on the collection page is an AND filter, here is an example of what does that mean?
Let us say your store is selling Tshirts with sizes (S, M, L, XL) and with colors (black, white, red, blue). A customer comes to your website, they want to find a Large size and look for Black and Red Colors. Currently, with Shopify's default filter functionality, the customer will hit Large size, which will filter all the products that are Large size which is good. Now, the customer hits Black color, which will also filter the Black color from the result of Large size, so basically the customer at this point will see Large size & Black color. Now, let us say, the customer wants to also see the Red color, and here is where everything goes wrong. When the customer hits the Red color, the filter will show Tshirts that are Large & Black & Red which is wrong, because you are trying to show them a Tshirt that is Large and the color is Black and Red at the same time. The customer here is trying to simply search for the combination of Large & Black Or Large & Red. While there are apps on the app store that can fix this issue, the problem with those apps is that they don't give you the custom look of your site, you just have to deal with their look & what they offer and this is a big problem for some brands.
Webinopoly created a custom code that can be added to your Shopify store, the code will basically sync all the active products & variants along with the tags (filter options you want your users to filter by) with an external database. Then they add a script on the collection page (on the filter section) to call the database anytime a customer hits a filter option, the call to the database will return Shopify IDs that fits the filter selection and show it to the customer on the page fulfilling their selection needs.
Here is an example, let us say a customer came to this site https://eroper.com/collections/mens-tops and they want to search for "Long Sleeve" shirts that are "Large or XL".
First, the customer will hit "Long Sleeve" which will filter all the shirts and show only their selection, then they will hit "Large" which will also filter their selection, now if they hit XL, it will NOT show the Products that are "Long Sleeve & Large & XL" at the same time because you can't find that selection, however, it will show "Long Sleeve & Large" OR "Long Sleeve & XL".
If you have any questions about how this works, please fill out the contact form or call us at 713-805-5888