Product detail featured image zoom resizing on mobile

Store Design
,

Topic summary

A developer is trying to adjust the zoom level of product detail images specifically for mobile viewports.

Current Issue:

  • Successfully modified desktop zoom settings via the product-template-variables.liquid snippet file
  • Mobile devices inherit the same zoom level as desktop (e.g., 800px zoom on a 390px mobile viewport)
  • This creates an excessive zoom experience on smaller screens

Technical Details:

  • The relevant code snippet shows variables like product_zoom_size set to ‘800x800’
  • Additional code (displayed in reversed text) appears to handle responsive sizing for different breakpoints (small, medium, large)
  • Different container widths trigger different image sizes (480x, 620x, 740x)

Seeking Solution:
The developer needs guidance on implementing separate, mobile-specific zoom settings that are proportional to smaller viewport dimensions rather than using the desktop configuration.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

Dear friends,

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:
natyheals.com

Here is the code from the snippet (product-template-variables.liquid) file that can change the zoom size:

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- 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 }}">