How can I enable multi-variant filtering with checkbox filters?

Technical Q&A

Topic summary

A developer is seeking help with implementing multi-variant checkbox filtering in Shopify. Currently, their tag filtering code only works with one variant type at a time.

Current Implementation:

  • Uses Liquid templating to create checkbox filters
  • Filters products by tags (specifically “BASE” and “WATT” variants)
  • Extracts variant labels using string slicing operations
  • Submits form on checkbox click

The Problem:
The existing code cannot handle multiple variant selections simultaneously—users can only filter by one variant type at once.

Code Structure:
The implementation loops through filter values, checks for specific tag prefixes (“BASE”, “WATT”), and generates checkboxes with appropriate states (checked/disabled based on availability). Note: Part of the code appears reversed/corrupted in the second section.

No solutions have been provided yet. The question remains open for community input on enabling simultaneous multi-variant filtering.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

i have add the code for tag filtering , only work with single type of variant at the time. need to add multi variant filter.

I have added below code here:

Any solutions available?

      <table>
        						<div class="row_f" style="border-bottom: solid 1px #868788; background-color: #f0f0f0;">
        							<div class="column_f" style="width: 50%;">BASE</div>
        						</div>
        					</table> 
            				<div  class="cont_desc"  id="demo3content">            
                                    <ul class="filter-group-display__list" style="display:block!important;">
                                      {%- for filter_value in filter.values -%}
                                           {% assign some = filter_value.label | slice:0,4 %}
                                            {% assign total_length = filter_value.label | size %}
                                            {% assign some_tag = filter_value.label | slice:4,total_length %}
                                             {% if some == "BASE" %}
                                            <li class="filter-group-display__list-item" >
                                              <label for="Filter-{{ filter.param_name }}-{{ forloop.index }}" class="selection">
                                                <input type="checkbox" class="input-check selection"
                                                name="{{ filter_value.param_name }}"
                                                value="{{ filter_value.value }}"
                                                id="Filter-{{ filter.param_name }}-{{ forloop.index }}"
                                                {% if filter_value.active -%}checked{%- endif %}
                                                {% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
                                              onclick="submit(event)">  {{ some_tag }}
                                             </label>
                                            </li>
                                           {% endif %}
                                      {%- endfor -%}
                                    </ul> 
            				 </div>
    						
        					<div class="row_f" style="border-bottom: solid 1px #868788; background-color: #f0f0f0;">
        						<div class="column_f" style=" width: 50%;">WATT</div>
        					</div>
        					<div class="cont_desc"  id="democontent">

                                   <ul class="filter-group-display__list" style="display:block!important;">
                                      {%- for filter_value in filter.values -%}
                                           {% assign some = filter_value.label | slice:0,4 %}
                                            {% assign total_length = filter_value.label | size %}
                                            {% assign some_tag = filter_value.label | slice:4,total_length %}
                                             {% if some == "WATT" %}
                                            <li class="filter-group-display__list-item" >
                                              <label for="Filter-{{ filter.param_name }}-{{ forloop.index }}" class="selection">
                                                <input type="checkbox" class="input-check selection"
                                                name="{{ filter_value.param_name }}"
                                                value="{{ filter_value.value }}"
                                                id="Filter-{{ filter.param_name }}-{{ forloop.index }}"
                                                {% if filter_value.active -%}checked{%- endif %}
                                                {% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
                                                onclick="submit(event)">  {{ some_tag }}
                                             </label>
                                            </li>
                                           {% endif %}
                                      {%- endfor -%}
                                    </ul>   
        						  </div>