Collection Filter Shopify Ecommerce App

Setup Instructions

If you'd prefer for our support team to make these changes for you, please reach out to appsupport@pixelunion.net.
Advanced styling changes not included. Your designer can help with further customization if needed.

Setup works only in the current live theme. If you need to work with an Unpublished theme, please Publish, complete steps below, then Unpublish after testing.

1. Create "All" collection

If it doesn't already exist, create a collection named All. Choose Automatically select products based on conditions, with condition
Product price is greater than -1

2. Review and Save App settings

In the app, click Settings button. Review, update as needed, and click Save (even if you didn't change anything).
Click Update product and collection tags button.

3. Include collection filter script

Go to Admin > Themes, hover over the 3 dots icon, and choose Edit HTML/CSS.
Go to Layouts folder and open theme.liquid file.

Before the </body> tag (scroll down at end of file), add

1
{% render 'collection-filter-v2' %}

4. Add filters to collection pages

Go to Admin > Online Store > Themes, click on the 3 dots icon, and choose Edit HTML/CSS.
Go to Templates folder and open collection-template.liquid or collection.liquid file.

Where you want the filters to be shown, add:

1
<div class="collection-filters-container cf-select-wrapper"></div>

5. Style the looks as desired

In the Theme editor, search for css and open your site-wide styling file (e.g. timber.scss.liquid, or style.scss.liquid).

Add this at the end:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
/* 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;
	}

}

6. (optional) Hide generated "cf-" tags from other tag lists

Where tags are listed, add this "unless" condition:

1
2
3
4
5
{% for tag in collection.all_tags %}
    {% unless tag contains 'cf-' %}
        <!-- initial for loop content goes here-->
    {% endunless %}
{% endfor %}