Collection Filter for Shopify

Setup Instructions

If you prefer us to do this coding:
   1. add support@suppleApps.com to your shop accounts (from Settings > Account > Add a staff member)
   2. please send $20 USD at https://paypal.me/suppleapp (subscription will still be required)
   3. email support@suppleapps.com and let us know what would you like to filter by
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

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:

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:

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

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