Shopify主题开发-在产品列表页面上添加一列过滤器

Question

我正在构建主题，并希望在左侧添加一列，这将有助于缩小显示的产品列表。

这将在以下页面上进行：

所有产品列表页面（列出所有产品）。

品牌特定产品列表页面（列出所有产品，但已在已选中的过滤器标签中列出该品牌）。

特定于类别的产品列表页面（列出所有产品，但已在已选中的过滤器标签中列出具有产品类别的产品。）

我的collection.list.liquid文件当前看起来像（显示我要添加的过滤器）：

<div class="section product-list-section">
    <div class="section-inner">

        <div class="product-filters">
            Sort - Price, Alphabetical, Most Recent
            Price - slider
            Brand - checkbox
            Category - checkbox
        </div>

        <div class="products-list">
            <h1 class="product-list-title">{{ collection.title }}</h1>

            {% paginate collection.products by 24 %}
                <div class="product-list">

                    {% for product in collection.products %}
                        <div class="single-product">
                            <a href="{{ product.url | within: collection }}" class="box-link"></a>
                            <img class="product-thumbnail" src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
                            <div class="product-information">
                                <p class="product-title">{{ product.title }}</p>
                                <p class="product-price">{{ product.price | money }}</p>
                                {% unless product.available %}
                                    <br><strong>sold out</strong>
                                {% endunless %}
                                <div class="product-buttons">
                                    {% include 'view-button' %}
                                    {% comment %}{% include 'add-to-cart-button' %}{% endcomment %}
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <p>no matches</p>
                    {% endfor %}

                </div>
                {% if paginate.pages > 1 %}
                    <div class="pagination">
                        {{ paginate | default_pagination }}
                    </div>
                {% endif %}
            {% endpaginate %}
        </div>

    </div>
</div>