Untitled

Here's how you can implement this:
1. Liquid Code for Product Filter

You'll need to loop through all the products and extract their color options to display color swatches in the filter. We’ll handle multiple colors, single colors, and no colors accordingly.
Step 1: Color Mapping (Hex Code to Color)

First, let’s define a color to hex mapping for displaying colors dynamically. This can either be hardcoded or come from a metafield.

Example of a hardcoded color mapping:

{% assign color_hex_codes = {
  'Red': '#FF0000',
  'Yellow': '#FFFF00',
  'Green': '#008000',
  'Pink': '#FFC0CB',
  'Blue': '#0000FF'
} %}

Step 2: Loop Through Products and Variants

We will loop through the products and their variants, check for the color options, and generate the swatches.

Here’s how you can structure the code to handle the three cases:

<div class="color-filter">
  {% assign color_options = '' %}
  
  {% for product in collections.all.products %}
    {% assign product_colors = '' %}
    
    {% for variant in product.variants %}
      {% if variant.option1 == "Color" %}
        {% assign color_name = variant.option1 %}
        
        {% assign hex_color = color_hex_codes[color_name] %}
        
        {% unless product_colors contains color_name %}
          <!-- Create a color swatch based on the hex color -->
          <label class="color-swatch" style="background-color: {{ hex_color }};">
            <input type="checkbox" class="color-checkbox" value="{{ color_name }}" />
          </label>
          {% assign product_colors = product_colors | append: color_name %}
        {% endunless %}
      {% endif %}
    {% endfor %}
    
    {% if product_colors == '' %}
      <!-- If no color variants found, don't show the color swatch -->
      <span class="no-color">No color available</span>
    {% endif %}
  {% endfor %}
</div>

Explanation of the Code:

    Check for Color Variants: The variant.option1 == "Color" condition checks if the product variant has a color option.
    Retrieve the Hex Code: We retrieve the hex code from the color_hex_codes mapping using color_name.
    Handling Multiple Colors: If a product has multiple colors, it will create swatches for each unique color.
    Handling No Colors: If a product has no colors, the text "No color available" will be shown.

2. CSS for Styling Color Swatches

Style the color swatches to appear as circles or squares:

.color-swatch {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px;
  border-radius: 50%;
  cursor: pointer;
}

.color-checkbox {
  display: none;
}

.no-color {
  display: inline-block;
  margin: 5px;
  color: gray;
}

This CSS ensures that the color swatches are displayed as circles and that products with no color show a message like "No color available".
3. JavaScript for Filtering by Color

Now, add the JavaScript to filter products based on the selected color swatches:

document.querySelectorAll('.color-checkbox').forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    var selectedColors = [];
    
    // Get all checked color swatches
    document.querySelectorAll('.color-checkbox:checked').forEach(function(checked) {
      selectedColors.push(checked.value);
    });

    // Filter products based on selected colors
    var products = document.querySelectorAll('.product');
    products.forEach(function(product) {
      var productColors = product.getAttribute('data-colors').split(',');
      var showProduct = false;
      
      // If the product has one of the selected colors, display it
      selectedColors.forEach(function(color) {
        if (productColors.includes(color)) {
          showProduct = true;
        }
      });

      if (showProduct || selectedColors.length === 0) {
        product.style.display = 'block';
      } else {
        product.style.display = 'none';
      }
    });
  });
});

Assigning Color Data to Products:

In your product listings, you need to assign the color information to each product so the filtering works correctly. Use the data-colors attribute to store the color variants:

<div class="product" data-colors="{% for variant in product.variants %}
  {% if variant.option1 == 'Color' %}
    {{ variant.option1 }},
  {% endif %}
{% endfor %}">
  <!-- Product details -->
</div>

This data-colors attribute contains all the color variants for the product, which can be used for filtering.