When I go to a product page, it does not have the default color - but I want to set the default color for a configurable product.

enter image description here

  • you want to select first swatch each time when page load? – Rakesh Jesadiya Aug 3 '16 at 8:42
  • Thank you for your comment. Yes, I want select product default when page load. Can you help me, please. – Kudo Yukiko Aug 4 '16 at 2:03

This code is working for color swatch attribute.

Using below code, first swatch are automatically selected after page load in details page,

you have to override file into your theme,


 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
<?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
<div class="swatch-opt"></div>
    require(["jquery", "jquery/ui", "swatchRenderer"], function ($) {
            jsonConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonConfig(); ?>,
            jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
            mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'

        //for selected option if only one value is exist....
            //for swatches1
            var swatchLength = $('.swatch-attribute').length;
            if(swatchLength >= 1){

  • Thank you very much. It working but different file I edit code this on vendor/magento/module-swatches/view/frontend/templates/product/view/renderer.phtml – Kudo Yukiko Aug 5 '16 at 2:17
  • @Rakesh, when am i trying to capture this events in options.phtml (module-catalog/view/frontend/template/product/view/options.phtml) its not triggered. – Ramesh Jun 29 '17 at 8:05
  • this is the issue magento.stackexchange.com/questions/181255/… – Ramesh Jun 29 '17 at 8:33

A better answer is below. The other answer I couldn't get to work on 2.1.4, the JS was running but it didn't do anything, not sure why? The solution below works perfectly and runs right after the options are rendered which may have been the problem with the other solution for me? It was running too early? :

Just Override your swatch-renderer.js file into your themee and change _init() function same as below: (approx. line 209)


_init: function () {  
        if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {

            //this is additional code for select first attribute value
            if(this.options.jsonConfig.attributes.length == 1){
                $('.swatch-attribute .swatch-attribute-options div.swatch-option').first().click();

        } else {
            console.log('SwatchRenderer: No input data received');

Create in own theme file Magento_Swatches/templates/product/view/renderer.phtml

add the next code like

], function ($) {
    $('[data-role="swatch-options"]').on('swatch.initialized', function () {
        $(this).find('.swatch-attribute.color .swatch-option').first().click();
  • The above code didn't work for me.I just add the code to add to cart page for config products and worked.thanks for the hint. – Mahmood Rehman Aug 26 '20 at 9:59

Override vendor\magento\module-swatches\view\frontend\web\js\swatch-renderer.js to your theme
your theme file location will be:

change _RenderControls() function

just wrinte below code at the end of this function

var swatchLength = $('.swatch-attribute').length;
if(swatchLength >= 1){


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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