Skip to content

How to Override the swatch-renderer.js in Magento 2 Custom Theme?

I am trying to override the swatch-renderer.js file in my custom Magento 2 theme. I have created the required directories and the custom JavaScript file but it doesn’t seem to work. Here is what I have done so far:

  1. Created the directory structure:
    app/design/frontend/Vendor/theme/Magento_Swatches/web/js/swatch-renderer.js

  2. Copied the original swatch-renderer.js to this directory and made my changes.

  3. Updated the requirejs-config.js in my theme as follows:

var config = {
    map: {
        "*": {
            'Magento_Swatches/js/swatch-renderer': 'js/custom-swatch-renderer'
        }
    }
};

But the changes do not seem to reflect on the frontend. Can anyone help me identify what I might be doing wrong? Thank you.