Shopify product images look stretched? Preserve proportions in a custom image snippet

[vistabylara-dev]

Use the free Shopify Help Finder to get checks for this problem and a copyable help summary. No email or store login required. This guides your next check; it does not inspect your store.

تمدد صور المنتجات قد ينتج عن فرض عرض وارتفاع غير متناسبين. المثال يحافظ على أبعاد الصورة الأصلية ويقدّم أحجاماً مناسبة للشاشات المختلفة.

Free Shopify code series · 20/50 · Reviewed 24 October 2026

Why this happens

A product photograph looks tall and narrow or unusually wide after a custom theme edit. Start by inspecting fixed CSS width/height rules. For a simple image outside a complex gallery, this snippet preserves the image's proportions and supplies responsive image sizes.

Before changing your store

Duplicate your theme and work in its unpublished preview. Save the original files. This is suggested code for a specific situation, not a guaranteed repair for every theme. Never paste PHP into Shopify Liquid files.

Where to put the code

Create snippets/vbl-product-image.liquid in a duplicate theme. Use the call inside a product-template section for a single main image that is actually the likely largest visible content image. Do not insert it alongside an existing copy of that image. This is a bounded custom-image example, not a replacement for a complete product gallery.

snippets/vbl-product-image.liquid

{% doc %}
  Renders one product image with its natural aspect ratio.
  @param {image} image - Image to render
  @param {boolean} [is_lcp] - True only for the main LCP image
  @param {boolean} [below_fold] - True only outside the initial viewport
{% enddoc %}
{% if image != blank %}
  {% liquid
    assign loading_mode = 'eager'
    assign priority = 'auto'
    if below_fold
      assign loading_mode = 'lazy'
    endif
    if is_lcp
      assign loading_mode = 'eager'
      assign priority = 'high'
    endif
  %}
  <div class="vbl-natural-image">
    {{ image | image_url: width: 1600 | image_tag: widths: '320, 480, 750, 1100, 1600', sizes: '(min-width: 990px) 50vw, 100vw', loading: loading_mode, fetchpriority: priority }}
  </div>
{% endif %}
{% stylesheet %}
  .vbl-natural-image > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
{% endstylesheet %}

Call from the product-template section:

{% render 'vbl-product-image', image: product.featured_image, is_lcp: true %}

What this example does not cover

The sizes value assumes an image occupying roughly half the viewport on desktop and the full viewport on smaller screens; adapt it to the real layout. Do not mark every image high priority. For images genuinely below the initial viewport, pass below_fold: true and omit is_lcp. Existing more-specific CSS can still override this rule. The snippet does not implement zoom, swatches, video, 3D media or gallery navigation.

Preview checks before publishing

Preview portrait, landscape and square source images at mobile and desktop widths. Confirm there is no distortion or horizontal overflow. Inspect the rendered img for width/height attributes and suitable srcset candidates. Keep meaningful product-image alt text in Shopify's image settings. Confirm the first visible main image is eager and only below-fold images are lazy. If no image is supplied, nothing is rendered; choose a deliberate missing-image treatment for your design.

Validation: The snippet and call passed Shopify's Liquid validation tool. No live merchant theme was edited. Visual appearance, integration with your theme and conversion impact have not been tested.

Rollback

Remove the example render call, restore any original markup you replaced, and return to the saved theme version if necessary. Keep the live theme unchanged until preview checks pass. Remove the added snippet only after removing its callers.

Need help applying this to your own store?

If this matches your issue, send Dr Lara your store URL, theme name, affected page and what changed before the problem appeared. Start with free guidance and a free initial consultation. If you want implementation, we agree the scope and fee separately before work begins.

Explore Shopify theme repairs and development with Vista by Lara

WhatsApp Dr Lara about this issue or call +971 50 799 4292.

Free guidance. No commitment. Practical implementation is separately scoped.

Join the free code discussion

Comment with a short, sanitized example and the expected result. Remove access tokens, passwords, customer data and private admin links. Following this series does not require buying a service.

• Free Shopify help hub
• Follow Dr Lara on GitHub
• Join our LinkedIn group
• Vista by Lara website

Official references

• Shopify documentation 1
• Shopify documentation 2

Dr Lara · Vista by Lara · Dubai, UAE