Menu Close

Get Support From ShopWired Close

All Systems Are Operational

Subscribe To Updates
Prefer To Live Chat? Chat directly with ShopWired support Available 9.00am to 7.00pm Monday to Friday
11.00am to 5.00pm Saturday
Quickest response time

Send A Message
Response within 24 hours

Menu Close

Menu

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, as shown in the example below.

ShopWired account functionality
Price filter settings
Installation instructions (all theme versions)


ShopWired account functionality

Once you've activated the extension you'll have access to new functionality within your ShopWired account for you to manage the filters that are assigned to your products.

Filters are grouped into filter groups (e.g. 'size', 'colour'), so you'll first need to setup these filter groups within your account. You can do this by following the instructions here.

Once you've created your filter groups, you can start assigning filters to individual products. This is a simple process, described here.


Price filter settings

You can create an automatic price filter on your website (by creating a 'price' filter group).

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.


Installation instructions (all theme versions)

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.

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.