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: Create All collection
In your Shopify admin, create an automated collection titled All. Add all your products to the collection by adding the following condition: Product price is greater than -1
Collection Filter uses this All collection to locate all your products and add tags to populate your filters. Click here for more information on creating automated collections in your Shopify admin.
Step 2: Review and save app settings
Go into your Collection Filter 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 3: Add Collection Filter script
In your Shopify admin, navigate to your Themes section. Next to the theme you want to install the app on, click Actions > Edit code to bring up the theme code editor.
Locate and open your theme.liquid file. Before the /body tag at the bottom of the file, add the following:
{% render 'collection-filter-v2' %}
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 %}
Ignore this step if you don't see any cf-tags on your storefront.