My configurable product have 2 attributes (size, color). When customer visit product detail page, I want to set default value (first value) for size and color.

Example: Product1: size(X,M, L), color (RED, BLUE, WHITE).

Customer access to product detail page -> Size M and color RED are selected.


1 Answer 1


swatch-renderer.js is responsible for swatches in configurable product.

You have to override swatch-renderer.js file to achieve your things.

For override swatch-renderer.js follow below step.

  1. Add requirejs-config.js file with given below path.


    var config = { config: { mixins: { 'Magento_Swatches/js/swatch-renderer': { 'Namespace_ModuleName/js/swatch-renderer': true } } } };

  2. Add `swatch-renderer.js file with given below path.


    define([ 'jquery', 'mage/url' ], function ($, url) { 'use strict';

    return function (widget) {
        $.widget('mage.SwatchRenderer', widget, {
            // Add your custom logic
        return $.mage.SwatchRenderer;

I hope it helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.