Product filters

Installation instructions (all theme versions)

To use product filters you must first install the app. To install the app select APPs > Available APPs from the menu. Find and select the 'Product Filters' app and select INSTALL THIS APP.

Once you've installed the app, you'll need to add the relevant code to your live theme's files. Adding the code will place the filters on your website. To add the relevant code you'll need to use the page editor for your live theme. Alternatively, if you don't want to add the code yourself, you can select request installation on the app installation page, and we will install the code for you for a small charge which is shown on the installation page.

When installing the code you will want to make sure that you install it so it's positioned on the side menu on your theme. This is usually contained within Views > Other > category_menu.twig or Views > Other > collection.twig. If you're editing theme files in advanced mode then the collection.twig file will be in the templates folder and the category_menu.twig file will be in the partials folder.

The filters must be placed inside the 'collection-container' element in order to be picked up by the Javascript plugin.

Code to display each filter group is shown below:

{% for filter_group in filter_groups %}
    <div class="filter-group">
        {{ filter_group.name }}
        {% for filter in filter_group.filters %}
            <div class="filter-container" style="{{ filter.product_count > 0 ? '' : 'display: none;' }}">
                {% if filter_group.type == 1 %}
                    <input class="price-range {{ filter.active ? 'current' : '' }}" type="checkbox" value="{{ filter.id }}" data-value="{{ filter.id }}" {{ filter.active ? 'checked="checked"' : '' }}>
                    {{ filter.name|raw }}
                {% else %}
                    <input class="filter {{ filter.active ? 'current' : '' }}" type="checkbox" value="{{ filter.id }}" data-value="{{ filter.id }}" {{ filter.active ? 'checked="checked"' : '' }}>
                    {{ filter.name }}
                {% endif %}
            </div>
        {% endfor %}
    </div>
{% endfor %}

The above code does not come with any styling and so will not display nicely on your website. In order to display nicely you will need to add CSS to your files and style according to how you want the filters to display.