Grey box appears when switching product configurations on Product Detail Page in AEM
In Adobe Experience Manager as a Cloud Service (AEMaaCS), a grey box appears on the Product Detail Page when switching between product configurations before the new product image loads. The issue is most noticeable when toggling between product variants and a placeholder displays until the new image is available. To resolve the issue, preload configuration images or improve placeholder handling.
Description description
Environment
- Adobe Experience Manager as a Cloud Service (AEMaaCS)
- AEM SaaS deployments
Issue/Symptoms
- When switching between different product configurations on the Product Detail Page, the main product image briefly displays a grey box before the new image loads.
- This is most noticeable when toggling between product variants, where the image is not preloaded and a placeholder is shown until the new image is available.
Root cause
This lag is typically caused by the way images are fetched and rendered during configuration changes, especially if images are not preloaded.
Resolution resolution
Follow the steps below to resolve the issue:
-
Review the current image-loading logic for the Product Detail Page, focusing on how images are fetched and rendered when a configuration changes.
-
If images are only loaded after a configuration is selected, consider implementing one of the following optimizations:
- Preload images for all configurations when the Product Detail Page loads so they are available when switching options.
- Implement lazy loading with a more user-friendly placeholder or loading animation instead of a grey box.
-
To preload images, add hidden
<img>elements for each configuration image in the page markup, or use JavaScript to createImageobjects and set their src attributes to the URLs of the images you want to preload. -
To customize the placeholder, update your Product Detail Page image component to display a branded or visually appealing loading indicator instead of a plain grey box while the new image is being fetched.
-
Test the Product Detail Page by switching between product configurations and verify that the image loads smoothly without a noticeable grey box or lag.