Shopify product detail featured image zoom resizing on mobile
Shopify product detail featured image zoom resizing on mobile
I want to resize the zoom level of the product detail's main featured image, however, I am able to do so for the desktop size by editing the liquid code on the relevant snippet file "product-template-variables.liquid" but I do not understand its setting for the mobile viewport.
Please note that on mobile it has the same zoom level that I set for the desktop or in general for example, if I have a 390px mobile viewport then the 800px image zoom level of the desktop is definitely too much.
Here is the link to the relevant page of the store to have an idea: The store
Here is the code from the snippet (product-template-variables.liquid) file that can change the zoom size:
{%- assign product_thumb_size = '180x' -%}
{%- assign product_zoom_size = '800x800' -%}
{%- assign product_image_size = '620x' -%}
{% case image_container_width %}
{% when 'small' %}
{%- assign product_image_width = 'medium-up--two-fifths' -%}
{%- assign product_description_width = 'medium-up--three-fifths' -%}
{%- assign product_image_size = '480x' -%}
{% when 'medium' %}
{%- assign product_image_width = 'medium-up--one-half' -%}
{%- assign product_description_width = 'medium-up--one-half' -%}
{%- assign product_image_size = '620x' -%}
{% when 'large' %}
{%- assign product_image_width = 'medium-up--three-fifths' -%}
{%- assign product_description_width = 'medium-up--two-fifths' -%}
{%- assign product_image_size = '740x' -%}
{% endcase %}
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: product_image_size }}">```
Turbo Multi-language Translator
Make the better internet purchasing globaly
Turbosify SEO Speed Booster
5.0 (7)•Free plan available
Get better conversions by improving store loading speed
Installed
Turbo Multi-language Chat - AI Customer service in one hand