window.addEventListener('error', function(e) { var msg = e.message || ''; if (msg.indexOf('Failed to fetch dynamically imported module') > -1 || msg.indexOf('Importing a module script failed') > -1) { console.warn('New deployment detected, reloading page...'); window.location.reload(); } }, true); - /* Montserrat Variable Font (Weights 100-900) */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype'); } /* Open Sans Variable Font (Weights 300-800) */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-display: swap; src: url('/fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype'); } Adobe Commerce configurable product image switch to related simple images /* If Javascript is enabled but the js_disabled cookie or ?js=0 query parameter is active, restore SPA mode */ var hasJsCookie = document.cookie.indexOf('js_disabled=1') !== -1; var hasJsParam = window.location.search.indexOf('js=0') !== -1; if (hasJsCookie || hasJsParam) { if (hasJsCookie) { const host = window.location.hostname; const wildDomain = '.' + host.replace(/^www\./, ''); document.cookie = 'js_disabled=; expires=Thu, 01 Jan 1970 00:00:00 UTC; Max-Age=0; path=/;'; document.cookie = 'js_disabled=; expires=Thu, 01 Jan 1970 00:00:00 UTC; Max-Age=0; path=/; domain=' + host + ';'; document.cookie = 'js_disabled=; expires=Thu, 01 Jan 1970 00:00:00 UTC; Max-Age=0; path=/; domain=' + wildDomain + ';'; } if (hasJsParam) { var cleanUrl = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search.replace(/[?&]js=0&?/g, '').replace(/\?$/, ''); window.location.replace(cleanUrl); } else { window.location.reload(); } } /* Prevent FOUC for navigation submenus before CSS is loaded */ .navigation ul.submenu { display: none; } /* Prevent FOUC for header and footer before main CSS is loaded */ .page-header, .page-footer { opacity: 0; } /* Prevent FOUC for hidden elements before CSS is loaded */ .is-hidden { display: none !important; } /* Noscript notice banner */ .noscript-warning-banner { background: linear-gradient(135deg, #1e1e24 0%, #121216 100%); color: #ffffff; padding: 16px 24px; border-bottom: 3px solid #ff9800; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-size: 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); position: relative; z-index: 99999; display: flex; justify-content: center; align-items: center; } .noscript-content { display: flex; align-items: center; gap: 16px; max-width: 1200px; width: 100%; } .noscript-icon { font-size: 24px; line-height: 1; } .noscript-text { flex: 1; } .noscript-text strong { display: block; font-size: 16px; margin-bottom: 4px; color: #ff9800; font-weight: 600; letter-spacing: 0.5px; } .noscript-text p { margin: 0; color: #d1d1e0; line-height: 1.4; } { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://www.sashas.org/#organization", "name": "Extensions Website", "url": "https://www.sashas.org/", "logo": { "@type": "ImageObject", "url": "https://www.sashas.org/logo.png", "width": 600, "height": 60 }, "address": { "@type": "PostalAddress", "addressLocality": "New York", "addressRegion": "NY", "addressCountry": "US" } }, { "@type": "WebSite", "@id": "https://www.sashas.org/#website", "url": "https://www.sashas.org/", "name": "Extensions Website", "publisher": { "@id": "https://www.sashas.org/#organization" }, "potentialAction": { "@type": "SearchAction", "target": "https://www.sashas.org/search?q={search_term_string}", "query-input": "required name=search_term_string" } }, { "@type": "WebPage", "@id": "https://www.sashas.org/blog/magento-configurable-product-image-switch-related-simple-images.html/#webpage", "url": "https://www.sashas.org/blog/magento-configurable-product-image-switch-related-simple-images.html", "name": "Adobe Commerce configurable product image switch to related simple images", "isPartOf": { "@id": "https://www.sashas.org/#website" }, "about": { "@id": "https://www.sashas.org/#organization" } }, { "@type": "BreadcrumbList", "@id": "https://www.sashas.org/blog/magento-configurable-product-image-switch-related-simple-images.html/#breadcrumb", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.sashas.org/" } ] }, { "@type": [ "BlogPosting", "FAQPage" ], "@id": "https://www.sashas.org/blog/magento-configurable-product-image-switch-related-simple-images.html/#article", "headline": "Adobe Commerce configurable product image switch to related simple images", "description": "Learn how to resolve issues and optimize your Adobe Commerce configurable product image switch to related simple images setup with our step-by-step technical guide.", "datePublished": "2015-01-13T00:18:33.000Z", "dateModified": "2015-01-13T00:18:33.000Z", "author": { "@type": "Person", "name": "Sasha Shkolnik", "url": "https://www.sashas.org/about-us" }, "publisher": { "@id": "https://www.sashas.org/#organization" }, "mainEntity": [ { "@type": "Question", "name": "What is the key takeaway of Adobe Commerce configurable product image switch to related simple images?", "acceptedAnswer": { "@type": "Answer", "text": "This article explains the best practices, optimizations, and technical details regarding Adobe Commerce configurable product image switch to related simple images." } } ] } ] } ⚠️ JavaScript Required To view this page correctly and access all features of S Group, please enable JavaScript in your browser settings. Toggle Nav [![The S Group Ecommerce Development](https://www.sashas.org/images/logo-gray.svg)](https://www.sashas.org/) [Experience](https://www.sashas.org/customer-experience.html) [Catalog Enhancements](https://www.sashas.org/customer-experience/catalog-enhancements.html) - [Cart / Checkout](https://www.sashas.org/customer-experience/cart-checkout.html) - [Customers](https://www.sashas.org/customer-experience/customers.html) - [Shipping](https://www.sashas.org/customer-experience/shipping.html) - [Payments](https://www.sashas.org/customer-experience/payments.html) - [Management](https://www.sashas.org/site-management.html) [Sales / Fulfillment](https://www.sashas.org/site-management/sales-fulfillment.html) - [Catalog](https://www.sashas.org/site-management/catalog.html) - [Customer Support](https://www.sashas.org/site-management/customer-support.html) - [Marketing / Promotions](https://www.sashas.org/site-management/marketing-promotions.html) - [Content](https://www.sashas.org/site-management/content-management.html) - [Reporting & Analytics](https://www.sashas.org/site-management/reporting-analytics.html) - [Optimization](https://www.sashas.org/optimization.html) [Performance](https://www.sashas.org/optimization/performance.html) - [Monitoring](https://www.sashas.org/optimization/monitoring.html) - [Troubleshooting / Debugging](https://www.sashas.org/optimization/troubleshooting-debugging.html) - [Blog](https://www.sashas.org/blog) - [About Us](https://www.sashas.org/about-us.html) - [My Account](https://www.sashas.org/customer/account/) - [Sign Out](https://www.sashas.org/#) - [Sign In](https://www.sashas.org/customer/login/) 0 You have no items in your shopping cart. - [Home](https://www.sashas.org/) - / - [Blog](https://www.sashas.org/blog/) - / - [Adobe Commerce](https://www.sashas.org/blog/?category=adobe%20commerce) - / - Adobe Commerce configurable product image switch to related simple images # Adobe Commerce configurable product image switch to related simple images ![Adobe Commerce configurable product image switch to related simple images - Adobe Commerce Technical Guide Guide](https://www.sashas.org/images/blog/img-magento-configurable-product-image-switch-related-simple-images.html-i.0.png) Adobe Commerce Communtiy and Enterprise  editions have configurable products, and once you set up configurable product you can associate simple products to configurable product and set price difference. This way when configurable option will be selected price will be updated, and this is only one element which magento updates by default. # But what if we want that configurable product image switch to image from related simple product? For example in a lot of places we assume that configurable product image switch to image according selected option. Let's say we have clothes store  - our configurable product it is t-shirt and option in this case which should switch its color. In this case when configurable product image switch to the related simple product image with right color it be presented more efficient way to customers and be more attractive.  Also it may be size or any other attribute which can be presented with configurable product. # What the solution that allows show associated simple product image when configurable product image switch happens? Definitely there are two ways. The first one is develop something on your own which will change images according to selected option when configurable option switch will happens.  But development from scratch very often not guarantee the best experience and limited by resources and time. The second option its find extension which can do it at the Adobe Commerce Connect. We went thru the marketplace and there not a lot of good solutions of achieve it.  Some of the magento extensions for configurable product image switch, also update description or something not related to image. I mean this things which in almost all cases same between simple and configurable product. This way page loading become more heavy or it cause a lot of Ajax requests to get related product information.  So solution what we decide to do its add information about related simple products to the page when it loads. This way when configurable product image switch will happen it wont add any additional Ajax request. All information will be loaded with page.  The extension which became the result of magento development its Configurable Image Switcher. Using this extension you can set in the options show or hide image placeholders. At the product page automatically when option will be chosen configurable product image switch to the associated simple product image.  Also there is support of most popular zoom versions like  Elevate Zoom or Cloud Zoom. However sometimes it need integration to custom zoom or light box extension. ![Adobe Commerce configurable product image switch to related simple images - Adobe Commerce Technical Guide Guide](https://www.sashas.org/images/blog/img-magento-configurable-product-image-switch-related-simple-images.html-i.1.png) # Video of usage configurable product image switch to related simple product ID 1TyH9M_mLe0 - [Contac Us](https://www.sashas.org/contact/) - [Privacy Policy](https://www.sashas.org/privacy-and-refund-policy.html) - [Refund Policy](https://www.sashas.org/refund-policy.html) © The S Group. All Rights Reserved.