Filter the configurable products based on the child product's color in Magento 2

[umar]

In Magento 2 How to filter the configurable products based on the child product's color. For example, if the parent has 4 children with Green, Red, Yellow and Black colors. If I select green in the filter. image of Relevant child product(green) should be visible in place of the parent product image.

[Rakesh Jesadiya]

You need to set Child product image from the backend,Edit Child product and set image specific to your color and when you click on child product color at that time they will display child product image instead of Main product image.

[amar_bhagat]

I have also come across a similar issue. The Magento version I have is 2.2.6. I have single image for the parent.(say of black product). I have three colors for the child products(say, black, green and red).

In the category page, the parent image is shown. Upon clicking the parent image, the product page opens with three color options. However, upon selecting any of the other two colors(i.e green and red), the appropriate color product(green or red) is displayed but the black parent image is also there in the image slider list below the image that is presently  displayed. In the most relevant case the parent image shouldn't be there in the image slider list when particular child product is selected. Is there a way to configure this? Kindly help.

[jwcarder]

You can change this setting using a custom theme. I don't have a link to the post I used to set mine up, but here is what my setup looks like.

In your custom theme's folder, you will need to add the following to a view.xml file.

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <vars module="Magento_ConfigurableProduct">
        <var name="gallery_switch_strategy">replace</var>
    </vars>
</view>