Looking for a good color swatch extension

Question

I am looking for advice on a good color swatch extension.

1. My products are apparel (tshirts) and are setup as configurable products, with three attributes - color, size and gender.
2. The customer should be able to use the swatches to configure the product in BOTH the category and product pages.
3. Selecting a color swatch must change the product image to show the image associated with the simple product. This needs to happen on both the category and product pages.

There are lots of extensions out there, and I am not sure which one to choose. Any pointers would be welcome! Thanks!

Answer 1

I can recommend you this extension. It works only for the product details page, but I think half of a solution is better than no solution.
The extension can replace the standard dropdowns with labels or simple product images.

Answer 2

I've used the Amasty extension for this on a site http://amasty.com/color-swatches-pro.html

They have a demo page for the category page here (click on the image under the dress) http://demo.amasty.com/csp-css/demo-products.html?d2si=63603

I found it works quite well.

Answer 3

Try the aheadWorks extension: Product Color Swatches

It works for both product and category pages. Hope that helps.

Answer 4

if you are using custom theme then make file (renderer.phtml) in Magento_Swatches\templates\product\view\

i.e.: Magento_Swatches\templates\product\view\renderer.phtml

    and paste below code (only for magento 2.1.0)


    <div class="swatch-opt" data-role="swatch-options"></div>
    <script>
        require(["jquery", "jquery/ui", "Magento_Swatches/js/swatch-renderer"], function ($) {
            var oJsonConfig = <?php echo $block->getJsonConfig(); ?>;
            $('.swatch-opt').SwatchRenderer({                    
                jsonConfig: <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>,
                jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
                mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
            });
        $('[data-gallery-role=gallery-placeholder]').on('gallery:loaded', function() {
        // NOTE: Using .one() instead of .on() to prevent duplicate bindings.
        $('.fotorama').one('fotorama:ready', function(e, fotorama, extra) {
          // Update product images faster when clicking on color swatch
          $('.swatch-option.color').click(function() {        
            var sOptionId = this.getAttribute('option-id');
            for (var attributeId in oJsonConfig.attributes) {
              console.log(oJsonConfig);
              var oAttribute = oJsonConfig.attributes[attributeId];
              if (oAttribute.code==='color') {
                for (var i=0; i<oAttribute.options.length; ++i) {
                  var oOption = oAttribute.options[i];
                  if (oOption.id===sOptionId) {
                    // Gather images
                    var aImages = oJsonConfig.images[oOption.products[0]],
                      aFotoramaImages = [];
                    for (var j=0; j<aImages.length; ++j) {
                      if (aImages[j].isMain) {
                        // Main image (first position)
                        aFotoramaImages[0] = {
                          full: aImages[j].full,
                          img: aImages[j].img,
                          thumb: aImages[j].thumb
                        };
                      } else {
                        // Subsequent images
                        aFotoramaImages[aImages[j].position] = {
                          full: aImages[j].full,
                          img: aImages[j].img,
                          thumb: aImages[j].thumb
                        };
                      }
                    }
                    // Load images into Fotorama
                    // API reference: http://fotorama.io/customize/api/
                    fotorama.load(aFotoramaImages);
                    break;
                  }
                }
                break;
              }
            }
          });

        });
      });
    });
    </script>