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: enter image description here

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.

  • check this link --- bsscommerce.com/blog/… Commented May 26, 2020 at 6:04
  • @MohitPatel Thanks for reply. The default view page dropdown is perfect but I need color swatches only on list page. Commented May 26, 2020 at 6:42
  • You want to different page different styles show???.view page drop down and listing page color swatches ??? Commented May 26, 2020 at 6:52
  • @MohitPatel yeah right. Commented May 26, 2020 at 7:01

1 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.

  • I want to add color in listing page and images on product view page. Any idea regarding it?
    – Unknown
    Commented Feb 3, 2021 at 6:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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