Magento 2 : how to add color swatches on list page

Question

Is it possible to add color swatches on the list page and color dropdown on the product view(detail) page?.

Please check below image, I added color attribute as a dropdown:

So by default on the product view page showing dropdown of the color attribute.

Now I need to add color swatches on product list page.

Is it possible?. If it's possible let me know how to set color swatches on the product list page.

Thank you so much.

Answer 1

I found a solution.

step-1: open admin > stores > attribute > product > search color and change color attribute from the dropdown to swatch.

step-2: open vendor/magento/module-swatches/Block/Product/Renderer/Configurable.php file

Replace line

const SWATCH_RENDERER_TEMPLATE = 'Magento_Swatches::product/view/renderer.phtml';

To line

const SWATCH_RENDERER_TEMPLATE = 'Magento_ConfigurableProduct::product/view/type/options/configurable.phtml';

Now, flush cache and check. You can see swatches on the Product list(category) page and dropdown on product view(detail) page.