A simple, jQuery based product variant filter for Shopify stores 👕 🔍
🚀 DEMO: See it in action at devtees.com. (Note: I'm no longer using this on devtees.com because I switched to a print on demand service that doesn't limit the sizes in stock; but if you have implemented the filter somewhere, let me know and I can add it to the Readme under an examples section!)
Ever wish you could show your Shopify customers a filtering option on your home or collection page so they can see available sizes without having to click through to the individual product page? Well, I did.
This adds very basic functionality to your Shopify store to filter products based on size, or whatever product variant you wish to filter by.
The filtering menu hides items that are unavailable in the selected variant, and displays the items that are availble in that variant.
By default the filter will work with a size variant if that's the only variant your products have available. Otherwise you can pass an option number to pick which variant to filter by.
-
Put
snippets/size-filter.liquidandsnippets/size-filter-dynamic.liquidinto your Shopifysnippetsdirectory. -
Put
assets/product-filter.jsinto yourassetsdirectory, and be sure to include it in your theme'slayout/theme.liquidfile in the document<head>in script tags. Alternatively, you could instead copy the contents inside the$(document).ready(function(){...});and paste it into your existingscripts.jsfile. Also, be sure you are including jQuery in your shop's theme as well. -
If you are going use the provided default styles, then include
assets/product-filter.css.liquidin yourassetsdirectory, and be sure to link to it from yourlayout/theme.liquidfile. Alternatively you could simply include the styles in your existing.css.liquidfile. -
Next you need to output the variant options as classnames in your
product-loop.liquidfile so the filter buttons will have something to trigger. Add the following values to the class attribute on yourdiv.productor corresponding markup:js-size-filter {% for variant in product.variants %}{% if variant.available %}size-{{ variant.title }} {% endif %}{% endfor %} -
Finally, you need to include the
size-filter.liquid(orsize-filter-dynamic.liquidif you want a dynamically generated menu; more on that below). Just use{% include 'size-filter' %}to include the filter menu wherever you'd like it to appear. In devtees.com example I've put it intemplates/index.liquid, but you could instead put it intemplates/collection.liquidif you wanted it to appear on every collection page. I just wanted it on the frontpage collection. E.g.:
<!-- start featured product -->
<div class="clearfix helper-section">
{% include 'size-filter' %}
{% if collections[settings.frontpage_collection].products.size == 0 %}
{% else %}As mentioned above, there are two options for generating the menu itself. There is a dynamic option that uses Liquid tags and outputs the available variants in an array, and there is a static option that is hard coded, and you can edit accordingly.
Why in BFE would I want to use a static, hard coded version? Great question. The answer is because you might not like the order that the dynamic version outputs your variants in, and apart from using the sort filter to output them alphabetically, there's not much in the way of options there. Personally, for my use on devtees.com as a size filter, I wanted them to appear in logical order, which was impossible dynamically. Hence the hard coded option.
I've included a set of styles based on my use at devtees.com. However, if you want to roll your own styles, just ignore the assets/product-filter.css.liquid file, and style in your own stylesheet however you like.
Note: the default styles I've provided use Sass, as it's now supported by Shopify css files with the .css.liquid extension.
One of the biggest limitations of this filter is that - because of how Shopify product variants work - in order for the filter to work your product variants must be formatted just right, or else the filter will fail. The filter relies on outputing your variant titles to a classname on the product listing, which it looks for to either hide or show when a filter nav button is clicked.
Consequently you must:
- Not include spaces in your variant names
- Write your variant names as you want them to appear in the filter menu
PROTIP: If you need to edit your product variants en masse, you can export your products from the Shopify Admin "Product" dashboard as a CSV file, do a find & replace to mass edit, them import it back into your shop. More on that in the Shopify docs here.
- shopify_theme - Shopify's CLI tool for directly uploading your locally edited theme files to your shop.
Found a bug? Want to improve the jQuery or Liquid logic? Pull requests welcome!
See the contributing docs for contribution guidelines and more ways to contribute.
This project is available freely under the terms of The MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
