Troubleshooting Guide: Image Display on the Ella Theme in the latest Chrome update
We've detected an Image Display issue in the Ella Theme due to the recent Chrome update, where a short code attribute is no longer supported. Our team has promptly addressed this and released an update to the theme source on Themeforest. If you prefer not to update the entire theme, follow the instructions below to resolve the issue on your website.
Fix an error caused by updating Google Chrome to the latest version, leading to image issues on the Product page.
1.1. Go to Edit Code -> Search 'product-page'. There are 08 files you need to fix.
product-page.liquid
product-page-full-width.liquid
product-page-full-width-2.liquid
product-page-gallery.liquid
product-page-horizontal-tabs-no-sidebar.liquid
product-page-left-right-sidebar.liquid
product-page-left-thumbs.liquid
product-page-right-thumbs.liquid
1.2. Replace sizes="auto" by the provided code below to all 08 product files at the same position as our sample images:
Search product-featured-image in the file and replace sizes="auto" by the following code:
| sizes="(min-width: 2000px) 1500px, (min-width: 1200px) 1200px, (min-width: 768px) calc((100vw - 30px) / 2), calc(100vw - 20px)" width="{{ media.width }}" height="{{ media.height }}" |
BEFORE
AFTER
1.3. Follow the below instruction to fix the issue on:
- Cart Page
- SideCart
- Edit Cart
- Sticky Add To Cart
- Product Card Sidebar
- Recently Viewed
- Go to "main-cart.liquid" file, search for the keyword: sizes="auto", and replace "auto" with the size of the image as shown in our sample instruction image below:
- Go to "halo-edit-cart.liquid" file, search for the keyword: sizes="auto", and replace "auto" with the size of the image as shown in our sample instruction image below:
- Go to "halo-side-cart.liquid" file, search for the keyword: sizes="auto", and replace "auto" with the size of the image as shown in our sample instruction image below:
- Go to "halo-sticky-add-to-cart.liquid" file, search for the keyword: sizes="auto", and replace "auto" with the size of the image as shown in our sample instruction image below:
- Go to "product-card-sidebar.liquid" file, search for the keyword: sizes="auto", and replace "auto" with the size of the image as shown in our sample instruction image below:
- Go to "product-variant-picker.liquid" file, search for the keyword: sizes="auto", and replace "auto" with the size of the image as shown in our sample instruction image below:
This file is only available if you use Ella from the newest theme source: 6.5.4 we have released recently days. If you don't see this file, just skip it.
- Go to "product-variant-sticky-mobile.liquid" file, search for the keyword: sizes="auto", and replace "auto" with the size of the image as shown in our sample instruction image below:
- Go to "product-variant.liquid" file, search for the keyword: sizes="auto", and replace "auto" with the size of the image as shown in our sample instruction image below:
- Go to "product.ajax_recently_viewed.liquid" file, search for the keyword: sizes="auto", and replace "auto" with the size of the image as shown in our sample instruction image below:
Conclusion:
Please feel free to reach out if you require further guidance or in case you cannot make the change by yourself. We are happy to help!
