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 ...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 to set different product prices for different customer groups?
It's possible to set prices per customer groups using the default Magento tier pricing feature. To configure tier prices, navigate to Products → Edit/create a product → Price → Advanced Pricing link. Here, is the Customer Group Price configurations, ...How to add a product attribute to rule conditions list?
Some attributes might not be available in the conditions list when you create a new rule. To add an attribute to the conditions, follow the steps below: Step 1. Navigate to Stores > Attributes > Product, choose the attribute and open the Storefront ...How to make customers add only specific amounts of products to the cart (e.g. 4, 8, 12, etc)?
Navigate to Catalog → Products → choose the product → Quantity → Advanced Inventory and set Enable Qty Increments to Yes. Once this setting is enabled, the Qty Increment field appears, where you can specify the step of the item qty customers should ...
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