Add Custom Image & Conditional Filters on Shopify Collection page

[Maxian]

I hope you're all doing well!

I’m looking to add custom filters on my Shopify store collection page. While most standard filters can be added using the Shopify Search & Discovery app, I need a more advanced setup with two specific requirements:

Filters with Images –
First:-
I want to display images alongside the filter options for a more visual experience.

Second:-
I want to add Condition-Based Filters – I have attached the reference website attachment in the chat please have a look
For example:-
I want to add an filter with two dropdowns:

The first dropdown will allow users to select an option e.g A,B,C,D Any option.

Based on the selected option, the second dropdown will show compatible bag sizes (since different option have different bags size rules).

Is there a way to implement such condition-based and image-based filters within Shopify, either through code or using an app? Any guidance or app recommendations would be greatly appreciated.

Thank you in advance!

[Small_Task_Help]

Hi,

Hope this will work

- Show Images in Filters

Html code example

{% for value in filter.values %}
  <label>
    <input type="checkbox" name="{{ value.param_name }}" value="{{ value.value }}">
    <img src="{{ 'color-' | append: value.label | append: '.png' | file_url }}" alt="{{ value.label }}">
    {{ value.label }}
  </label>
{% endfor %}

- For Condition-Based Filters Add Two Dropdowns on Collection Page and Use JavaScript to Change Sizes Based on Type

JavaScript example

document.getElementById('filter-type').addEventListener('change', function () {
  var selectedType = this.value;
  var sizeDropdown = document.getElementById('filter-size');

  // Clear existing options
  sizeDropdown.innerHTML = '<option value="">Select Size</option>';

  // Define bag size options for each type
  const sizeOptions = {
    A: ['Small', 'Medium', 'Large'],
    B: ['Large', 'XL'],
    C: ['Small', 'XL'],
    ['Medium']
  };

  if (sizeOptions[selectedType]) {
    sizeOptions[selectedType].forEach(function (size) {
      let option = document.createElement('option');
      option.value = size;
      option.text = size;
      sizeDropdown.appendChild(option);
    });
  }
});