Magento 2 – Hide Configurable Parent Product Image from Details Page When Color Swatch is Selected

Hello Magento Friends,

In this tutorial, I am going to explain How to Hide the Configurable Parent Product Image when any Swatch is selected in Magento 2.

Magento default supports various product types to help store merchants manage their catalogs. One of them is configurable products. You can create configurable products in Magento 2 with the help of the following two ways:

• Create Configurable Product Programmatically
• Create Configurable Product from Admin Panel

Configurable products have one parent product and various child products. Configurable products have swatches to provide different color or size options to users. Configure Color Swatches in Magento 2

By default, the parent product image is displayed when no swatch is selected. But when a user selects any swatch, it will also show the parent product along with the related swatch images.

To hide parent product image of configurable products from the product details page when the swatch is selected, follow the below steps

Steps to Hide Configurable Parent Product Image when Swatch is Clicked in Magento 2:

The Luma Theme default value is prepend.

Replace “prepend” with “replace” for  gallery_switch_strategy

For that move to the below path

app\design\frontend\Themes\Yourtheme\etc\view.xml

Then, modify the code as follows

<vars module="Magento_ConfigurableProduct">
      <var name="gallery_switch_strategy">replace</var>
</vars>

Conclusion:

Thai way you can hide parent configurable product image when the user selects any swatch option in Magento 2. If you have any doubt, feel free to reach me via the comment section. Share the blog with others and stay tuned for more.

Happy Coding!