Shopify多选项颜色与尺码筛选器创建及查询执行位置问询

Hey there! Let's break down your questions about Shopify product filters step by step.

You have two main paths to build multi-option color/size filters—using Shopify's built-in tools or custom code for full control.

1. Use Shopify's Built-In Search & Discovery (Easiest) #

Most modern Shopify themes support multi-option filters out of the box with Shopify's official Search & Discovery app:

• Go to your Shopify admin → Apps → Search & Discovery.
• Navigate to the Filters tab, then create filter groups for "Color" and "Size" using your product variant options.
• Head to your theme editor (Online Store → Themes → Customize), go to your collection page, add a "Filters" section, and enable the color/size filters you created.
• Look for a setting like Allow multiple selections in the filter section settings to let users pick multiple colors/sizes at once.

2. Custom Code Implementation (For Full Customization) #

If you need a tailored look or behavior, build it with Liquid and JavaScript:

Step 1: Add Filter UI to Your Collection Template #

Edit your collection section file (usually sections/collection-template.liquid or collection.liquid) and add checkbox groups for color and size:

<div class="filter-container">
  <div class="filter-group">
    <h4>*Color*</h4>
    {% assign unique_colors = collection.products | map: 'options' | where: 'name', 'Color' | map: 'values' | uniq | sort %}
    {% for color in unique_colors %}
      <label class="filter-checkbox-label">
        <input 
          type="checkbox" 
          class="filter-checkbox" 
          data-filter-type="color" 
          value="{{ color | handle }}"
          {% if request.params.color contains color | handle %}checked{% endif %}
        >
        {{ color }}
      </label>
    {% endfor %}
  </div>

  <div class="filter-group">
    <h4>*Size*</h4>
    {% assign unique_sizes = collection.products | map: 'options' | where: 'name', 'Size' | map: 'values' | uniq | sort %}
    {% for size in unique_sizes %}
      <label class="filter-checkbox-label">
        <input 
          type="checkbox" 
          class="filter-checkbox" 
          data-filter-type="size" 
          value="{{ size | handle }}"
          {% if request.params.size contains size | handle %}checked{% endif %}
        >
        {{ size }}
      </label>
    {% endfor %}
  </div>
</div>

Step 2: Add JavaScript to Handle Filter Changes #

Add this script to your theme's theme.js or a dedicated filter.js file:

document.querySelectorAll('.filter-checkbox').forEach(checkbox => {
  checkbox.addEventListener('change', updateFilterURL);
});

function updateFilterURL() {
  const colorSelections = Array.from(document.querySelectorAll('.filter-checkbox[data-filter-type="color"]:checked'))
    .map(cb => cb.value);
  const sizeSelections = Array.from(document.querySelectorAll('.filter-checkbox[data-filter-type="size"]:checked'))
    .map(cb => cb.value);

  const searchParams = new URLSearchParams(window.location.search);

  // Update color parameter
  if (colorSelections.length) {
    searchParams.set('color', colorSelections.join(','));
  } else {
    searchParams.delete('color');
  }

  // Update size parameter
  if (sizeSelections.length) {
    searchParams.set('size', sizeSelections.join(','));
  } else {
    searchParams.delete('size');
  }

  // Reload page with updated filters
  window.location.search = searchParams.toString();
}

Step 3: Filter Products Using Liquid #

Back in your collection template, modify the product loop to honor the URL parameters:

{% assign filtered_products = collection.products %}

<!-- Filter by color -->
{% if request.params.color %}
  {% assign color_filters = request.params.color | split: ',' %}
  {% assign filtered_products = filtered_products | where: 'options.Color', color_filters %}
{% endif %}

<!-- Filter by size -->
{% if request.params.size %}
  {% assign size_filters = request.params.size | split: ',' %}
  {% assign filtered_products = filtered_products | where: 'options.Size', size_filters %}
{% endif %}

<!-- Render filtered products -->
{% for product in filtered_products %}
  <!-- Your product card code here -->
{% endfor %}

Where the query parameters are processed depends on how your theme or filters are set up:

1. Custom Theme Code:

   • Check your collection section file (sections/collection-template.liquid) or main collection template (collection.liquid). Look for code that references request.params (e.g., request.params.color, request.params.size) or filters collection.products based on URL values.
   • Some themes use snippets like snippets/product-grid.liquid to handle product rendering—check there too for filter logic.

2. Shopify Search & Discovery App:

   • If you're using the official app, the filter logic runs on Shopify's backend. In your theme, you'll find a filter section that loads the app's embedded code (look for HTML comments like <!-- Search & Discovery Filter --> or script tags referencing search-discovery). The app handles parameter processing and product filtering automatically.

3. Third-Party Filter Apps:

   • If you're using a third-party app (like Boost Product Filter), the parameter processing is managed by the app's scripts. Check your theme's theme.js for app-specific code, or look for app-added sections in your theme editor.

A common pattern in custom themes looks like this:

{% if request.params.tags or request.params.color %}
  {% assign filtered_products = collection.products | tagged_with: request.params.tags | where: 'options.Color', request.params.color %}
{% else %}
  {% assign filtered_products = collection.products %}
{% endif %}

This is where the URL parameters are used to narrow down the product list.

内容的提问来源于stack exchange，提问作者Varinder