Showing results for 
Search instead for 
Did you mean: 

How to create custom filter

How to create custom filter

I have a doubt, in my filters I need that, when clicking on a color, for example BLUE, it opens the variations of BLUE below (Navy Blue, Dark Blue..) I thought about making 2 attributes, one as master color, and another as a secondary color, however, I can't figure out how to display this. So that when you click on the color, it displays the secondary colors below. How can I do this? Is there a search engine that can help me, or something similar?


Re: How to create custom filter

Hello @viniaraujo493a 


  1. Master Color Attribute:

    • Create a master color attribute (e.g., master_color).
  2. Secondary Color Attribute:

    • Create a secondary color attribute (e.g., secondary_color).

Step 2: Create Configurable Products

  1. Configure Configurable Products:
    • Create configurable products for each master color.
    • Associate simple products with variations (e.g., Navy Blue, Dark Blue) to the configurable products.

Step 3: Modify Product Templates

  1. Override Attribute PHTML Files:

    • In your custom theme, override the template files responsible for rendering product attributes.
    • For example, you might need to override Magento_ConfigurableProduct/templates/product/attribute/option-renderer/list.phtml.
  2. Add JavaScript Logic:

    • Add JavaScript logic to capture the selection of the master color and dynamically update the options for the secondary color.
// Sample JavaScript (replace with actual implementation)
], function ($, _, swatchRenderer) {
    // Listen for changes in the master color dropdown
    $('.swatch-attribute.master_color').on('click', '.swatch-option', function () {
        var selectedMasterColor = $(this).attr('option-id');

        // Use AJAX to fetch and update the secondary color swatches
        // Example: You might have an endpoint that returns secondary colors based on the master color
            url: '/getSecondaryColors/' + selectedMasterColor,
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                // Update the secondary color swatches
            error: function () {
                console.error('Failed to fetch secondary colors.');
  1. Create a Controller/Endpoint:

    • Implement a controller or endpoint that fetches secondary color options based on the selected master color.
  2. Return JSON Response:

    • Ensure that the server-side logic returns a JSON response containing the necessary information for updating the secondary color options.
Was my answer helpful? You can accept it as a solution.
175+ Professional Extensions for M1 & M2
Need a developer?Just visit Contact Us Now