How to make product image change after choosing a configurable option on the product listing page?
Configurable products are assembled from simple products, which represent variations of the same item. Each simple product can have its own image that differs it from other options. For example, you can upload images of different color variations of the same product. When customers look through the catalog, it's more handful for them to see what the color looks like right after they select a color option on the catalog page instead of going to the product page.
Default Magento does allow changing product images when selecting a configurable option. To enable this functionality, go to Stores → Attributes → Product → choose the attribute (e.g., color) → Properties tab and enable the Update Product Preview Image setting.
As a result, the product images change according to the chosen color option:
Moreover, this setting is also responsible for changing the image when the corresponding navigation filter is applied:
Related Articles
How to show configurable options in product listing?
If product options are not displayed on category pages, customers have to select them from the product page to add the items to the cart. To display configurable swatches on category pages, navigate to Stores → Attributes → Product → choose the ...Why aren't AMP versions generated for product listing pages?
The AMP versions are not generated for categories with display mode set to Static Block and/or anchor set to No. Make sure to have the categories anchored and have display mode Products Only or Static Block & Products. These options are available at ...How should I submit configurable products with their variants to Google Merchant?
Google advises using the item group ID [item_group_id] attribute to group product variants in the product data. Variants are a group of similar products that only differ from one another by product details like size [size], color [color], material ...How can I add more countries to the Shipping Country condition dropdown?
Many rule conditions, such as in Magento Cart Price Rules or Amasty Shipping extensions, use the default Shipping Country condition option. It offers to choose countries allowed in the general settings of Magento. To add more default countries to ...How does Omnibus Price Tracker work with configurable products?
The Omnibus Price Tracker extension correctly tracks child products price changes for both child and parent products in the Price Change History log: As well as displays the price change notification on the parent product page if the price is changed ...
Announcements
⚡ Have you enlarged the functionality of the Amasty extension with your own code? Share your improvements with us!
At Amasty, we understand that some of our clients require customized features to perfectly align the extension with their business needs. If you have developed new functionality within an Amasty module and would like to share it, please submit a ticket