Product filters

A filter system is where you assign certain attributes to your products (like colour, shape, size etc.) and then, when visiting your website, your customers are able to quickly filter the products that they want to see.

A good example of this can be seen on the screenshot below from the Excellar website (which sells wine).


Installing the extension

Select 'apps and extensions' from the left menu and then 'available extensions'. Find the 'product filters' extension and click to activate it on your account.

Once the extension is activated you'll then need to add the relevant code to your website's files (described below). Adding the code will place the filters on your website. To add the relevant code you'll need to use the page editor, alternatively you can click the 'request installation' button and we'll install the code for you (a small charge will be made for the installation, which is listed on the extension page).

Once the installation is activated you'll be able to start adding filters to your products and grouping them into filter groups. You can read the help guides for filters by clicking here.

For self-installation

You'll need to make sure that you install the code onto 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 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.

Installation By Us

If you choose to have us install the extension for you, as part of the installation process we'll design how the filters will be displayed.


Filter system settings

On the filter extension page you need to set the price filter ranges. This is where you say the ranges that you would like customers to be able to use when filtering by price.

For example, on the screenshot below the price ranges for the filters shown are 'Up to £50', '£50 - £100', '£100 - £250', '£250 - £500', '£500 - £1,000', '£1,000 - £2,500', '£2,500 - £5,000 and £5,000 and over'

Within the price filter ranges setting, you need to enter each price range as X-X, e.g. 50-100

Separate ranges with a comma, e.g. 50-100,100-250,250-500

Use 0 to represent 'up to' and 'and over', e.g.

0-50 (means up to 50)
5000-0 (means 5000 and over)

So, for the same ranges as shown on the example above you would enter:

0-50,50-100,100-250,250-500,500-1000,1000-2500,2500-5000,5000-0

So you'll now end up with something like shown on the screenshot example below.

Please contact us if you have any questions about these settings.