In the Belliza Theme, there was an issue with image display caused by a recent Chrome update. This was due to a shortcode attribute no longer being supported. Our team has promptly fixed this issue and released an update to the theme source on Themeforest. If you prefer not to update the entire theme, follow the provided instructions to resolve the problem on your website.
Note: Before you begin, make sure that you have taken backup of code and database. Steps can be different for your theme, this guide is for Belliza Shopify Theme.
Steps to fix the issue manually:
You need to update a few lines of code to fix an error caused by updating Google Chrome to the latest version. This issue is leading to a distorted product image on the Product page.
1.1. Go to Edit Code -> Search ‘product-page’.
1.2. Add code below to the product-page.liquid file at the same position as our sample images:
Search product-featured-image in the file and replace the following code:
<img id="product-featured-image-{{ media.id }}"
{% if settings.enable_lazyload %}data-{% endif %}srcset="{{ media.preview_image | img_url: 'master' }}"
{% unless settings.enable_lazyload %}src="{{ media | img_url: 'master' }}"{% endunless %}
alt="{{ media.preview_image.alt | escape }}"
sizes="(min-width: 2000px) 1500px, (min-width: 1200px) 1200px, (min-width: 768px) calc((100vw - 30px) / 2), calc(100vw - 20px)"
data-sizes="auto"
data-main-image
data-index="{{ forloop.index }}"
data-cursor-image
{% if settings.enable_lazyload %}class="lazyload" loading="lazy"{% endif %}
/>
{%- if settings.enable_lazyload -%}<span class="data-lazy-loading"></span>{%- endif -%}
BEFORE
AFTER
