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 firstname.lastname@example.org 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
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
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
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: