You can’t set any image & color icon image in the Magento color dropdown attribute.

If you want to set color images in the dropdown of the color attribute then follow below steps.

Step 1: Override this file in your theme and replace with the below code.

app/design/frontend/[VendorName]/[theme]/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml

<?php
/** @var $block \Magento\ConfigurableProduct\Block\Product\View\Type\Configurable*/
$_product    = $block->getProduct();
$_attributes = $block->decorateArray($block->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <?php foreach ($_attributes as $_attribute): ?>
        <?php if($block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) == 'Color'): ?>
            <div class="field configurable required color">
                <label class="label" for="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>">
                    <span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>
                </label>
                <div class="control drop-down">
                    <select name="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                            data-selector="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                            data-validate="{required:true}"
                            id="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>"
                            class="super-attribute-select">
                        <option value=""><?= /* @escapeNotVerified */ __('Choose an Option...') ?></option>
                    </select>
                </div>
            </div>
        <?php else: ?>
            <div class="field configurable required">
                <label class="label" for="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>">
                    <span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>
                </label>
                <div class="control">
                    <select name="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                            data-selector="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                            data-validate="{required:true}"
                            id="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>"
                            class="super-attribute-select">
                        <option value=""><?= /* @escapeNotVerified */ __('Choose an Option...') ?></option>
                    </select>
                </div>
            </div>
        <?php endif; ?>            
    <?php endforeach; ?>
    <script type="text/x-magento-init">
        {
            "#product_addtocart_form": {
                "configurable": {
                    "spConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>,
                    "gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
                        'Magento_ConfigurableProduct') ?: 'replace'; ?>"
                }
            },
            "*" : {
                "Magento_ConfigurableProduct/js/catalog-add-to-cart": {}
            }
        }
    </script>
<?php endif;?>
<?php 
    $objectManager =   \Magento\Framework\App\ObjectManager::getInstance();
    $connection = $objectManager->get('Magento\Framework\App\ResourceConnection')->getConnection('\Magento\Framework\App\ResourceConnection::DEFAULT_CONNECTION'); 
    $records = $connection->fetchAll("SELECT * FROM color_code");
    // In color_code table have 3 fields like id, color_name, image_url
    // and store data something like this
    // id   color_name      image_url
    // 1    Black           pub/media/catalog/swatches/2/40x40/media/black.png
    // 2    Green           pub/media/catalog/swatches/2/40x40/media/green.png
    // 3    White           pub/media/catalog/swatches/2/40x40/media/white.png
    //print_r($records);
    $storeManager = $objectManager->get('\Magento\Store\Model\StoreManagerInterface');
    $base_url = $storeManager->getStore()->getBaseUrl();
?>    
<script type="text/javascript">
require(["jquery"], function(jQuery) {
    document.onreadystatechange = function(){
        if(document.readyState=='loaded' || document.readyState=='complete') {
            setTimeout(function(){ 
                
                jQuery('.drop-down').append('<div class="button"></div>');  
                jQuery('.drop-down').append('<ul class="select-list"></ul>');
                jQuery('.drop-down select option').each(function() {
                    var bg = jQuery(this).val();
                    var colortext1 = jQuery(this).text();
                    var colortext1_arr = colortext1.split(' +');
                    var colortext = colortext1_arr[0].replace(/\s/g, '');
                    
                    var obj = [];
                    <?php foreach ($records as $color) { ?>
                        obj['<?php echo $color['color_name']; ?>'] = '<?php echo $base_url.$color['image_url']; ?>';  
                    <?php } ?>

                    jQuery('.select-list').append('<li class="clsAnchor"><span class="color-icon" style="background:url(' + obj[colortext] + ') no-repeat center center"></span><span value="' + bg + '" class="' + jQuery(this).attr('class') + '" >' + colortext1_arr[0] + '</span></li>');
                });
                jQuery('.drop-down .button').html('<span class="color-icon" style="background-color:' + jQuery('.drop-down select').find(':selected').val() + '"></span><span class="color-text">' + jQuery('.drop-down select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');              
                jQuery('.drop-down ul li').each(function() {
                    if (jQuery(this).find('span').text() == jQuery('.drop-down select').find(':selected').text()) {
                        jQuery(this).addClass('active');
                    }
                });
                jQuery('.drop-down .select-list span').on('click', function() {
                    var dd_text = jQuery(this).text();
                    var dd_val = jQuery(this).attr('value');
                    var dd_color_arr = dd_text.split(' +');
                    var dd_color = dd_color_arr[0].replace(/\s/g, '');
                    
                    jQuery('.super-attribute-select option[value='+ dd_val +']').prop('selected',true).trigger('change');

                    var obj1 = [];
                    <?php foreach ($records as $color) { ?>
                        obj1['<?php echo $color['color_name']; ?>'] = '<?php echo $base_url.$color['image_url']; ?>';                         
                    <?php } ?>

                    jQuery('.drop-down .button').html('<span class="color-icon" style="background:url(' + obj1[dd_color] + ') no-repeat center center"></span><span class="color-text">' + dd_color_arr[0] + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');
                    jQuery('.drop-down .select-list span').parent().removeClass('active');
                    jQuery(this).parent().addClass('active');
                    jQuery('.drop-down select[name=options]').val( dd_text );
                    jQuery('.drop-down .select-list li').slideUp();                
                });                
                jQuery('.drop-down .button').on('click', function() {
                    jQuery('.drop-down ul li').slideToggle();
                });
            }, 3000);            
        }
    }
}); 
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

<?php

/** @var $block \Magento\ConfigurableProduct\Block\Product\View\Type\Configurable*/

$_product = $block->getProduct();

$_attributes = $block->decorateArray($block->getAllowAttributes());

<?php if ($_product->isSaleable() && count($_attributes)):?>

<?php foreach ($_attributes as $_attribute): ?>

<?php if($block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) == 'Color'): ?>

<label class="label" for="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>">

<span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>

</label>

<select name="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"

data-selector="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"

data-validate="{required:true}"

id="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>"

class="super-attribute-select">

</select>

</div>

<?php else: ?>

<label class="label" for="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>">

<span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>

</label>

<select name="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"

data-selector="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"

data-validate="{required:true}"

id="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>"

class="super-attribute-select">

</select>

</div>

<?php endif; ?>

<?php endforeach; ?>

{

"#product_addtocart_form": {

"configurable": {

"spConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>,

"gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',

'Magento_ConfigurableProduct') ?: 'replace'; ?>"

}

"*" : {

"Magento_ConfigurableProduct/js/catalog-add-to-cart": {}

}

</script>

<?php endif;?>

<?php

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$connection = $objectManager->get('Magento\Framework\App\ResourceConnection')->getConnection('\Magento\Framework\App\ResourceConnection::DEFAULT_CONNECTION');

$records = $connection->fetchAll("SELECT * FROM color_code");

// In color_code table have 3 fields like id, color_name, image_url

// and store data something like this

// id color_name image_url

// 1 Black pub/media/catalog/swatches/2/40x40/media/black.png

// 2 Green pub/media/catalog/swatches/2/40x40/media/green.png

// 3 White pub/media/catalog/swatches/2/40x40/media/white.png

//print_r($records);

$storeManager = $objectManager->get('\Magento\Store\Model\StoreManagerInterface');

$base_url = $storeManager->getStore()->getBaseUrl();

require(["jquery"], function(jQuery) {

document.onreadystatechange = function(){

if(document.readyState=='loaded' || document.readyState=='complete') {

setTimeout(function(){

jQuery('.drop-down').append('<div class="button"></div>');

jQuery('.drop-down').append('<ul class="select-list"></ul>');

jQuery('.drop-down select option').each(function() {

var bg = jQuery(this).val();

var colortext1 = jQuery(this).text();

var colortext1_arr = colortext1.split(' +');

var colortext = colortext1_arr[0].replace(/\s/g, '');

var obj = [];

<?php foreach ($records as $color) { ?>

obj['<?php echo $color['color_name']; ?>'] = '<?php echo $base_url.$color['image_url']; ?>';

<?php } ?>

jQuery('.select-list').append('<li class="clsAnchor"><span class="color-icon" style="background:url(' + obj[colortext] + ') no-repeat center center"></span><span value="' + bg + '" class="' + jQuery(this).attr('class') + '" >' + colortext1_arr[0] + '</span></li>');

});

jQuery('.drop-down .button').html('<span class="color-icon" style="background-color:' + jQuery('.drop-down select').find(':selected').val() + '"></span><span class="color-text">' + jQuery('.drop-down select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');

jQuery('.drop-down ul li').each(function() {

if (jQuery(this).find('span').text() == jQuery('.drop-down select').find(':selected').text()) {

jQuery(this).addClass('active');

}

});

jQuery('.drop-down .select-list span').on('click', function() {

var dd_text = jQuery(this).text();

var dd_val = jQuery(this).attr('value');

var dd_color_arr = dd_text.split(' +');

var dd_color = dd_color_arr[0].replace(/\s/g, '');

jQuery('.super-attribute-select option[value='+ dd_val +']').prop('selected',true).trigger('change');

var obj1 = [];

<?php foreach ($records as $color) { ?>

obj1['<?php echo $color['color_name']; ?>'] = '<?php echo $base_url.$color['image_url']; ?>';

<?php } ?>

jQuery('.drop-down .button').html('<span class="color-icon" style="background:url(' + obj1[dd_color] + ') no-repeat center center"></span><span class="color-text">' + dd_color_arr[0] + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');

jQuery('.drop-down .select-list span').parent().removeClass('active');

jQuery(this).parent().addClass('active');

jQuery('.drop-down select[name=options]').val( dd_text );

jQuery('.drop-down .select-list li').slideUp();

});

jQuery('.drop-down .button').on('click', function() {

jQuery('.drop-down ul li').slideToggle();

});

}, 3000);

}

});

</script>

Step 2: Add below CSS in your style.css

.color .drop-down { position: relative; width: auto; margin-top: 0; font-family: verdana; }
.color .drop-down select { display: none; }
.color .drop-down .button { border: 1px solid #000; padding: 0px 8px; color: #333; border-radius: 6px; }
.color .drop-down .button .color-icon { display: block; width: 20px; height: 20px; float: left; border-radius: 3px; margin: 6px 10px 6px 0px; }
.color .drop-down .button a { float: right; text-decoration: none; }
.color .drop-down .select-list { position: absolute; top: 0; left: 0; z-index: 1; margin-top: 40px; padding: 0; background-color: #f0f0f0; 
    border-radius: 6px; width: 100%; max-height: 250px; overflow: auto; }
.color .drop-down .select-list li:first-child { margin-top: 1rem; }
.color .drop-down .select-list li { display: none; list-style: none; }
.color .drop-down .select-list li span { display: inline-block; min-height: 32px; padding: 5px 15px 5px 15px; background-position: left 10px center; background-repeat: no-repeat; font-size: 16px; text-align: left; color: #FFF; opacity: 0.7; box-sizing: border-box; color: #333; font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-style: normal; }
.color .drop-down .select-list li span.undefined { padding: 0px 15px !important; }
.color .drop-down .select-list li span:hover, .drop-down .select-list li span:focus { opacity: 1; }
.color .drop-down .select-list li span.color-icon { float: left; margin-left: 10px; border-radius: 5px; }
.color .drop-down .select-list li span.swatch-option { float: right; border: none; margin: 0; }

.color .drop-down { position: relative; width: auto; margin-top: 0; font-family: verdana; }

.color .drop-down select { display: none; }

.color .drop-down .button { border: 1px solid #000; padding: 0px 8px; color: #333; border-radius: 6px; }

.color .drop-down .button .color-icon { display: block; width: 20px; height: 20px; float: left; border-radius: 3px; margin: 6px 10px 6px 0px; }

.color .drop-down .button a { float: right; text-decoration: none; }

.color .drop-down .select-list { position: absolute; top: 0; left: 0; z-index: 1; margin-top: 40px; padding: 0; background-color: #f0f0f0;

border-radius: 6px; width: 100%; max-height: 250px; overflow: auto; }

.color .drop-down .select-list li:first-child { margin-top: 1rem; }

.color .drop-down .select-list li { display: none; list-style: none; }

.color .drop-down .select-list li span { display: inline-block; min-height: 32px; padding: 5px 15px 5px 15px; background-position: left 10px center; background-repeat: no-repeat; font-size: 16px; text-align: left; color: #FFF; opacity: 0.7; box-sizing: border-box; color: #333; font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-style: normal; }

.color .drop-down .select-list li span.undefined { padding: 0px 15px !important; }

.color .drop-down .select-list li span:hover, .drop-down .select-list li span:focus { opacity: 1; }

.color .drop-down .select-list li span.color-icon { float: left; margin-left: 10px; border-radius: 5px; }

.color .drop-down .select-list li span.swatch-option { float: right; border: none; margin: 0; }

Step 3: Run below commands.

- php bin/magento setup:upgrade
- php bin/magento cache:clean

1 2	- php bin/magento setup:upgrade - php bin/magento cache:clean

That’s it.

After making these changes, you can check your product detail page. You will see color images or icons in the color select boxes.

Was this article helpful?

YesNo

Fill the below form if you have any Magento programming need.

Magento 2 move wishlist link after add to cart button in product detail page
Today I am going to share that how we can...
How to add category drop down in system configuration Magento 2?
For any custom module we can add category drop down...
How to add custom product sorter in magento 2?
This article is a solution If you want to add...
Solve : Call to a member function setUseContainer() on boolean in customer wishlist page
If you face this type of fatal error on customer...
Magento 2 Site breaking due to Braintree Configuration
This article is a solution If you face an uncaught...

Author Info

Hire R. Patel

Fill the form & Get Installation Support

Connect With Us

Connect With Us

How to set color images in select box of color attribute in Magento 2?

Recent Articles

Author Info

Get a Free Quote