The swatch display type is used to show a color or texture for a product or one of its attributes. It’s commonly used for products that are available in different colors or materials. For example, you could use swatches to let your customers select from available patterns of fabric.
Setting Up the Option
Go to Store Setup › Design, than click Edit HTML/CSS.
Find Category.html, Copy below code and paste the code before </body>
<script type=”text/javascript”> /* Ajax in Product Color Options */ $(‘#frmCompare ul.ProductList > li’).each(function(index, el) { var _this=$(el); var thisProductName=_this.find(‘.ProductName’); var thisProductURL=thisProductName.find(‘> a’).attr(‘href’); // AJAX to this product $.ajax({ url: thisProductURL, type: ‘GET’, dataType: ‘html’, async: false }) .done(function(data) { // find “color” swatches var thisSwatches=$(‘.productAttributeRow’, data) .filter(function() { return $(this).find(‘.productAttributeLabel .name’).text().trim()==“Color:”; }) .find(‘.productAttributeValue .previewContent span.swatchColour’); // Append swatches if (thisSwatches.length > 0) { thisSwatches.wrapAll(‘<div class=”colorGrid”></div>’).parent().appendTo(thisProductName); } // end if }); // end ajax done }); // end each </script>
Save the changes and its Done.
