Caution: This is an advanced article that involves editing your theme's code. If you're not comfortable with coding, contact our support team for assistance before making any changes.
Step 1: Review and save app settings
Go into your app dashboard and click Settings. Review and adjust your settings, then click save. This will sync the app with your products. Click here for more information on adjusting your app’s settings.
Step 2: Add the app snippet
In your Shopify admin, navigate to your Themes section. Next to the theme you want to install the app on, click the 3 dots and select Edit code to bring up the theme code editor.
Click Add a new snippet, and title it collection-filter. Make sure to enter the title exactly as it's written here.
After adding the title, paste the following snippet then click Save:
<script>window.jQuery || document.write("<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'>\x3C/script>")</script><script>window.cfDocCookies={getItem:function(a){return a?decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*"+encodeURIComponent(a).replace(/[\-\.\+\*]/g,"\\$&")+"\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1"))||null:null},setItem:function(a,b,c,d,e,f){if(!a||/^(?:expires|max\-age|path|domain|secure)$/i.test(a))return!1;var g="";if(c)switch(c.constructor){case Number:g=c===1/0?"; expires=Fri, 31 Dec 9999 23:59:59 GMT":"; max-age="+c;break;case String:g="; expires="+c;break;case Date:g="; expires="+c.toUTCString()}return document.cookie=encodeURIComponent(a)+"="+encodeURIComponent(b)+g+(e?"; domain="+e:"")+(d?"; path="+d:"")+(f?"; secure":""),!0},removeItem:function(a,b,c){return!!this.hasItem(a)&&(document.cookie=encodeURIComponent(a)+"=; expires=Thu, 01 Jan 1970 00:00:00 GMT"+(c?"; domain="+c:"")+(b?"; path="+b:""),!0)},hasItem:function(a){return!!a&&new RegExp("(?:^|;\\s*)"+encodeURIComponent(a).replace(/[\-\.\+\*]/g,"\\$&")+"\\s*\\=").test(document.cookie)},keys:function(){for(var a=document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g,"").split(/\s*(?:\=[^;]*)?;\s*/),b=a.length,c=0;c<b;c++)a[c]=decodeURIComponent(a[c]);return a}};function utilGetParameterByName(name,query_string){if(typeof query_string=="undefined"){query_string=window.location.search}name=name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var regexS="[\\?&]"+name+"=([^&#]*)";var regex=new RegExp(regexS);var results=regex.exec(query_string);if(results===null)return"";else return decodeURIComponent(results[1].replace(/\+/g," "))}function CollectionFilterHandleGet(){var handle;if(window.location.pathname=="/"){return"all"}handle=window.location.pathname.substring("/collections/".length);handle=handle.split("/")[0];return handle}function CollectionFilterLegacyTagsGet(){var tags;if(window.location.pathname=="/"){return""}tags=window.location.pathname.substring("/collections/".length);if(tags.split("/").length==1){return""}tags=tags.split("/")[1];return tags}function CollectionFilterSetProductDetailVariant(product,selected_filters){var selected_options=[];for(var i=0;i<selected_filters.length;i++){for(var j=0;j<product.options.length;j++){var o=product.options[j];if(o.name.toLowerCase()==selected_filters[i].option_name.toLowerCase()){selected_options.push({position:o.position,title:selected_filters[i].variant_title})}}}if(selected_options.length==0||product.variants.length==1){return}for(var i=0;i<product.variants.length;i++){var v=product.variants[i];if(v.title.indexOf("% Off")>-1){continue}if(v.inventory_management=="shopify"){if(v.inventory_policy=="deny"&&v.inventory_quantity<=0){continue}}var found_variant=true;for(var j=0;j<selected_options.length;j++){if(v["option"+selected_options[j].position]!=selected_options[j].title){found_variant=false}}if(found_variant){window.location.href=window.location.pathname+"?variant="+v.id;document.querySelector("[name='id']").value=v.id;return}}}function CollectionFilterFlushHandle(){if(utilGetParameterByName("debug")=="yes"){console.log("CollectionFilterFlush()")}var keys=window.cfDocCookies.keys().filter(function(k){return k.indexOf("cf-handle")==0});keys.map(function(k){window.cfDocCookies.removeItem(k,"/")})}function CollectionFilterFlush(){if(utilGetParameterByName("debug")=="yes"){console.log("CollectionFilterFlush()")}var keys=window.cfDocCookies.keys().filter(function(k){return k.indexOf("cf-")==0});keys.map(function(k){window.cfDocCookies.removeItem(k,"/")})}function CollectionFilterInitialize(){if(utilGetParameterByName("debug")=="yes"){console.log("CollectionFilterInitialize")}if(window.location.pathname.indexOf("/products/")>-1){if(utilGetParameterByName("variant")==""){var cook=window.cfDocCookies.getItem("cf-app-selected-filters");if(cook&&typeof cook=="string"){var selected_filters=JSON.parse(cook);if(selected_filters.length>0){jQuery.getJSON(window.location.pathname+".json",function(product_data){CollectionFilterSetProductDetailVariant(product_data.product,selected_filters)})}}}return}if(window.location.pathname=="/search"||window.location.pathname=="/"){}else{if(window.location.pathname.indexOf("/collections/")==-1){return}}var cf_last_update_hours=Math.floor((new Date).getTime()/1e3);var cook=window.cfDocCookies.getItem("cf-last_update_hours");if(cook&&typeof cook=="string"){if(cf_last_update_hours-parseInt(cook)>=600){CollectionFilterFlush()}}else{CollectionFilterFlush()}if(utilGetParameterByName("sort_by")!=""){window.cfDocCookies.setItem("cf-app-remember-sort_by",utilGetParameterByName("sort_by"),null,"/")}if(utilGetParameterByName("view")!=""){window.cfDocCookies.setItem("cf-app-remember-view",utilGetParameterByName("view"),null,"/")}var cook=window.cfDocCookies.getItem("cf-app_settings");if(cook&&typeof cook=="string"){window.appcf.app_settings=JSON.parse(window.cfDocCookies.getItem("cf-app_settings"))}var handle=CollectionFilterHandleGet();var cook=window.cfDocCookies.getItem("cf-handle-"+handle);if(cook&&typeof cook=="string"){window.appcf.filters=JSON.parse(cook)}if(utilGetParameterByName("debug")=="yes"){console.log("CollectionFilterInitialize app_settings",window.appcf.app_settings,"filters",window.appcf.filters)}if(window.appcf.app_settings&&window.appcf.filters){CollectionFilterCheckRemember(handle);CollectionFilterPopulateOptions(handle)}else{jQuery.ajax({cache:true,contentType:"application/json; charset=utf-8",dataType:"json",type:"GET",url:window.appcf.api_get,data:{shop:window.appcf.shop,handle:handle.trim().toLowerCase()},success:function(data){if(data.filters.options.length==0){return}if(utilGetParameterByName("debug")=="yes"){console.log("CF got data data.filters.options.length",data.filters.options.length);console.log("CF got data data.filters.options[0].values.length",data.filters.options[0].values.length)}window.appcf.app_settings=data.app_settings;window.cfDocCookies.setItem("cf-app_settings",JSON.stringify(window.appcf.app_settings),null,"/");window.appcf.filters=data.filters;CollectionFilterFlushHandle();window.cfDocCookies.setItem("cf-handle-"+handle,JSON.stringify(window.appcf.filters),null,"/");window.cfDocCookies.setItem("cf-last_update_hours",cf_last_update_hours,null,"/");CollectionFilterCheckRemember(handle);CollectionFilterPopulateOptions(handle)}})}if(window.location.pathname=="/search"){var q_current_a_no_tags=CollectionFilterGetSearchValuesNoTags();jQuery("input[name='q']").val(q_current_a_no_tags.join(" "))}}function CollectionFilterSelectedFiltersGet(handle){var selected_filters="",selected_filters_a=[];if(window.location.pathname=="/search"){selected_filters=utilGetParameterByName("q")}else{selected_filters=window.location.pathname.replace("/collections/"+handle,"").replace("/","")}if(typeof selected_filters=="string"&&selected_filters!=""){selected_filters=decodeURIComponent(selected_filters);selected_filters_a=selected_filters.toLowerCase().split("+")}return selected_filters_a}function CollectionFilterSetRemember(handle,new_tags){var remember_tags=[];var cook=window.cfDocCookies.getItem("cf-app-remember-tags");if(cook&&typeof cook=="string"){remember_tags=JSON.parse(cook)}for(var i=0;i<new_tags.length;i++){if(remember_tags.indexOf(new_tags[i])==-1){remember_tags.push(new_tags[i])}}var remember_tags_new=[];var options=[];if(typeof window.appcf.filters.options=="object"){options=window.appcf.filters.options}var all_tags=[];for(var i=0;i<options.length;i++){for(var j=0;j<options[i].values.length;j++){all_tags.push(options[i].values[j].tag)}}for(var i=0;i<remember_tags.length;i++){if(all_tags.indexOf(remember_tags[i])>-1){if(new_tags.indexOf(remember_tags[i])>-1){remember_tags_new.push(remember_tags[i])}}else{remember_tags_new.push(remember_tags[i])}}window.cfDocCookies.setItem("cf-app-remember-tags",JSON.stringify(remember_tags_new),null,"/")}function CollectionFilterCheckRemember(handle){if(window.location.pathname=="/"||window.location.pathname=="/search"){return}var selected_filters=CollectionFilterSelectedFiltersGet(handle);var remember_tags=[];var cook=window.cfDocCookies.getItem("cf-app-remember-tags");if(cook&&typeof cook=="string"){remember_tags=JSON.parse(cook)}var options=[];if(typeof window.appcf.filters.options=="object"){options=window.appcf.filters.options}var all_tags=[];for(var i=0;i<options.length;i++){for(var j=0;j<options[i].values.length;j++){all_tags.push(options[i].values[j].tag)}}var selected_filters_add=[];for(var i=0;i<remember_tags.length;i++){if(all_tags.indexOf(remember_tags[i])>-1){if(selected_filters.indexOf(remember_tags[i].toLowerCase())==-1){selected_filters_add.push(remember_tags[i])}}}var sort_by="";var cook=window.cfDocCookies.getItem("cf-app-remember-sort_by");if(cook&&typeof cook=="string"){var sort_by=cook}if(selected_filters_add.length==0&&sort_by==utilGetParameterByName("sort_by")){return}selected_filters.push.apply(selected_filters,selected_filters_add);CollectionFilterRedirect(handle,selected_filters)}function CollectionFilterPopulateOptions(handle){if(utilGetParameterByName("debug")=="yes"){console.log("CollectionFilterPopulateOptions",handle)}var app_settings=window.appcf.app_settings;var options=[];if(typeof window.appcf.filters.options=="object"){options=window.appcf.filters.options}if(typeof app_settings.show_only_options=="undefined"){app_settings.show_only_options=""}app_settings.show_only_options=app_settings.show_only_options.trim();var show_only_options_a=[];if(app_settings.show_only_options!=""){show_only_options_a=app_settings.show_only_options.split(",")}var ohtml="";var selected_filters=CollectionFilterSelectedFiltersGet(handle);if(typeof app_settings.appearance=="undefined"){app_settings.appearance=[]}if(typeof app_settings.production_mode=="undefined"){app_settings.production_mode=false}if(app_settings.production_mode==false){CollectionFilterFlush()}if(app_settings.appearance.length==0){for(var i=0;i<show_only_options_a.length;i++){app_settings.appearance.push({name:show_only_options_a[i],label:"",style:"select",all:""})}}var cf_selected_filters=[];if(utilGetParameterByName("debug")=="yes"){console.log("options",options,"app_settings",app_settings)}for(var soi=0;soi<app_settings.appearance.length;soi++){var option_appearance=app_settings.appearance[soi];var option=options.filter(function(o){return o.name.toLowerCase()==option_appearance.name.toLowerCase()});if(option.length!=1){continue}option=option[0];if(utilGetParameterByName("debug")=="yes"){l("option0",option)}if(app_settings.production_mode&&option.values.length<=1){continue}ohtml+=" <span class='cf-label cf-title'>"+(option_appearance.label==""?option_appearance.name:option_appearance.label)+"</span>";ohtml+=" <span class='cf-options-container'>";var mobile_width=720;if(typeof window.cf_mobile_width=="number"){mobile_width=window.cf_mobile_width}if(jQuery(window).width()<=mobile_width){option_appearance.style="select"}if(option_appearance.style=="select"){ohtml+="<select class='cf-select'>";ohtml+="<option value=''>"+(typeof option_appearance.all=="string"?option_appearance.all:"")+"</option>";for(var vi=0;vi<option.values.length;vi++){ohtml+="<option value='"+option.values[vi].tag+"' ";if(selected_filters.indexOf(option.values[vi].tag.toLowerCase())>=0){ohtml+=" selected";cf_selected_filters.push({option_name:option.name,variant_title:option.values[vi].name})}ohtml+=">"+option.values[vi].name+"</option>"}ohtml+="</select>"}if(option_appearance.style=="checkboxes"){var has_a_filter=false;var all_label=typeof option_appearance.all=="string"?option_appearance.all:"";var ohtml_tmp="";for(var vi=0;vi<option.values.length;vi++){var id_remove_value="cf-"+CollectionFilterConvertToSlug(option_appearance.name)+"-";var id_value=option.values[vi].tag.replace(id_remove_value,"");ohtml_tmp+="<label><input class='cf-checkbox' name='"+option_appearance.name+"[]' data-group-name='"+option_appearance.name+"' type='checkbox' value='"+option.values[vi].tag+"' id='"+id_value+"' ";ohtml_tmp+=(selected_filters.indexOf(option.values[vi].tag.toLowerCase())>=0?" checked ":"")+" > <span>"+option.values[vi].name+"</span></label>";if(selected_filters.indexOf(option.values[vi].tag.toLowerCase())>=0){has_a_filter=true;cf_selected_filters.push({option_name:option.name,variant_title:option.values[vi].name})}}if(all_label!=""){ohtml+="<label><input class='cf-checkbox' name='"+option_appearance.name+"[]' data-group-name='"+option_appearance.name+"' type='checkbox' value='' id='' ";if(has_a_filter==false){ohtml+=" checked "}ohtml+=" > <span>"+all_label+"</span></label>"}ohtml+=ohtml_tmp}if(option_appearance.style=="radios"){ohtml+="<label><input class='cf-radio' data-group-name='"+option_appearance.name+"' type='radio' value='' ";ohtml+=" > <span>"+(typeof option_appearance.all=="string"?option_appearance.all:"View All")+"</span></label>";for(var vi=0;vi<option.values.length;vi++){ohtml+="<label><input class='cf-radio' data-group-name='"+option_appearance.name+"' type='radio' value='"+option.values[vi].tag+"' ";ohtml+=(selected_filters.indexOf(option.values[vi].tag.toLowerCase())>=0?" checked ":"")+" > <span>"+option.values[vi].name+"</span></label>";if(selected_filters.indexOf(option.values[vi].tag.toLowerCase())>=0){cf_selected_filters.push({option_name:option.name,variant_title:option.values[vi].name})}}}ohtml+=" </span>"}if(utilGetParameterByName("debug")=="yes"){console.log("CF ohtml",ohtml)}jQuery(".collection-filters-container").html(ohtml);jQuery("#collection-filters-container").html(ohtml);if(utilGetParameterByName("debug")=="yes"){console.log("ohtml",ohtml);console.log("collection-filters-container",jQuery(".collection-filters-container").length)}setTimeout(function(){jQuery(".cf-select").bind("change",CollectionFilterChange);jQuery(".cf-checkbox").bind("change",CollectionFilterChange);jQuery(".cf-radio").bind("change",CollectionFilterChange);if(utilGetParameterByName("debug")=="yes"){}if(typeof CollectionFilterReady=="function"){CollectionFilterReady()}},600);window.cfDocCookies.setItem("cf-app-selected-filters",JSON.stringify(cf_selected_filters),null,"/")}function CollectionFilterGetSearchValuesNoTags(){if(window.location.pathname!="/search"){return[]}var q_current_a=[];if(utilGetParameterByName("q")!=""){q_current_a=utilGetParameterByName("q").split(" ")}var q_current_a_no_tags=[];for(var i=0;i<q_current_a.length;i++){if(q_current_a[i].indexOf("tag:")==-1){q_current_a_no_tags.push(q_current_a[i])}}return q_current_a_no_tags}function CollectionFilterRedirect(handle,tags){if(window.location.pathname=="/search"){var q_current_a_no_tags=CollectionFilterGetSearchValuesNoTags();for(var i=0;i<tags.length;i++){q_current_a_no_tags.push("tag:"+tags[i])}window.location="/search?type="+utilGetParameterByName("type")+"&q="+q_current_a_no_tags.join("+")}else{var location_url="/collections/"+handle+"/"+tags.join("+");location_url=location_url.replace(/&/g,"%26");var sort_by=utilGetParameterByName("sort_by");if(typeof sort_by=="undefined"||sort_by==""){var cook=window.cfDocCookies.getItem("cf-app-remember-sort_by");if(cook&&typeof cook=="string"){sort_by=cook}}if(typeof sort_by=="undefined"||sort_by==""){}else{if(location_url.indexOf("?")>-1){location_url+="&"}else{location_url+="?"}location_url+="sort_by="+sort_by}var view=utilGetParameterByName("view");if(typeof view=="undefined"||view==""){var cook=window.cfDocCookies.getItem("cf-app-remember-view");if(cook&&typeof cook=="string"){view=cook}}if(typeof sort_by=="undefined"||view==""){}else{if(location_url.indexOf("?")>-1){location_url+="&"}else{location_url+="?"}location_url+="view="+view}window.location.href=location_url}}function CollectionFilterChange(ev){var group_name=jQuery(ev.currentTarget).data("group-name");var checkbox_current_val="";var handle=CollectionFilterHandleGet();if(typeof group_name!="undefined"){checkbox_current_val=jQuery(ev.currentTarget).val()}var $cf_container=jQuery(ev.currentTarget).closest(".collection-filters-container");if($cf_container.length==0){$cf_container=jQuery(ev.currentTarget).closest("#collection-filters-container")}var tags=[];$cf_container.find(".cf-select").each(function(index){var v=jQuery(this).val();if(v!=""){tags.push(v)}});$cf_container.find(".cf-checkbox:checked").each(function(index){var v=jQuery(this).val();if(v!=""){if(jQuery(this).data("group-name")!=group_name){tags.push(v)}else if(v==checkbox_current_val){tags.push(v)}}});$cf_container.find(".cf-radio:checked").each(function(index){var v=jQuery(this).val();if(v!=""){if(jQuery(this).data("group-name")!=group_name){if(v!=""){tags.push(v)}}else if(v==checkbox_current_val){tags.push(v)}}});CollectionFilterSetRemember(handle,tags);CollectionFilterRedirect(handle,tags)}function CollectionFilterStart(){if(typeof jQuery!="function"){console.log("please add jQuery to shop theme.liquid");return}if(typeof window.app_cf_started=="number"){return}window.app_cf_started=1;window.l=function(){};try{window.l=console.log.bind(console)}catch(e){}var env=utilGetParameterByName("env");window.appcf={shop:"##{{shop.permanent_domain | remove: '.myshopify.com' }}",api_get:"https://collection-filter-www.herokuapp.com/api/v1/filters",app_settings:null,filters:null};if(window.location.host=="sadev3.myshopify.com"){window.appcf.api_get="https://localhost/api/v1/filters"}CollectionFilterInitialize()}function CollectionFilterConvertToSlug(Text){return Text.toLowerCase().replace(/ /g,"-").replace(/[^\w-]+/g,"")}CollectionFilterStart();</script>
Step 3: Add the app script
Locate and open your theme.liquid file. Before the </body> tag at the bottom of the file, add the following:
{% render 'collection-filter' %}
Step 4: Add filters to collection template
In your theme code editor, locate your collection template. The name of the file may vary depending on the theme you're using, but it will often be titled collection-template.liquid or collection.liquid.
Locate where you'd like to place your filters, then add the following:
<div class="collection-filters-container cf-select-wrapper"></div>
Step 5: Add style sheet
In your theme code editor, locate your theme's CSS file. This will often be titled timber.scss.liquid, or style.scss.liquid.
Scroll to the very bottom of the file then add the following:
/* Your designer can adjust these to get all kind of looks:
one or separate lines, active links instead of checkboxes, colors etc. */.collection-filters-container {/**/ text-align: center; margin: 10px 0px 10px 0px; font-size: 16px; display: block;}.cf-title { display: inline-block; /* to have filters separated one per line, change "inline-block" to "block" */ font-weight: bold; margin: 0px 5px 0px 24px; font-size: 16px;/*
text-transform: uppercase;
margin: 20px 0px 0px 0px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 6px;
*/}.cf-options-container {/* optional, restrict height of available options to a scrollable container *//*
display: block;
max-height: 360px;
overflow: auto;
*/}.cf-select { display: inline-block; /* to have filters separated one per line, change "inline-block" to "block" */ width: 12em; margin-right: 1em; float: none !important; height: 40px; /*background: transparent url(https://cdn.shopify.com/s/files/1/0653/0119/t/1/assets/select.png) no-repeat right;*/ /*border-radius: 15px;*/ padding: 2px 2px 2px 17px; /*color: #000;
background-color: #dedede;*/ border: solid 1px #d3d2d2; /*border: 0px solid;*/ /*box-shadow: none;*/ /*background-image: none;*/ /*-webkit-appearance: none;*//* vertical-align: middle;*//*
background-color: #000;
border-color: #000;
color: #ffffff;
padding: 0px;
margin-left: 4em;
*/}.cf-checkbox, .cf-radio { /*display: none !important;*/ padding: 0; /*margin: 0 !important;*/ vertical-align: bottom; position: relative; top: -6px;}/* individual checkbox labels */.collection-filters-container label span { font-weight: normal; opacity: 0.8;}.collection-filters-container label { display: block; /* to have checkboxes on the same line, change "block" to "inline-block" */ margin: 0px 6px 6px 0px; cursor: pointer; font-weight: normal;}/*
.collection-filters-container label {
margin: 0px;
padding: 10px 0px 10px 10px;
background-color: #fff;
}
.collection-filters-container label:nth-child(even) {
background: #fafafa;
}
*/.cf-checkbox:checked + span { font-weight: bold !important; opacity: 1; /* color: #000000; */}.cf-radio:checked + span { font-weight: bold !important; opacity: 1; /* color: #000000; */}.cf-mobile-only { display: none;}/* mobile */@media (max-width: 760px) { .cf-title { display: none; /* to have filters separated one per line, change "inline-block" to "block" */ font-weight: bold; margin: 2px 5px 0px 0px; } .cf-select { display: block; /* to have filters separated one per line, change "inline-block" to "block" */ width: 100%; max-width:none; } .cf-desktop-only { display: none; } .cf-mobile-only { display: block; }}
Step 6 (optional): Hide cf- tags from other filters
Certain themes may have built-in filters or sorting features, and when you install Collection Filter our tags may get pulled into these theme filters. To remove those tags, open your theme code editor and locate where collection tags are rendered.
Around the HTML generating tags, add the following:
{% unless tag contains 'cf-' %}
<!-- HTML that renders collection tags -->
{% endunless %}
For example, the HTML generating collection tags in your theme may look like this:
{% for tag in collection.all_tags %}
<!-- HTML that renders collection tags -->
{% endfor %}
You would then wrap that HTML like this:
{% for tag in collection.all_tags %}
{% unless tag contains 'cf-' %}
<!-- HTML that renders collection tags -->
{% endunless %}
{% endfor %}Note: ignore this step if you don't see any cf-tags on your storefront.