Hi everyone,
I am experiencing an issue with the product images on my Shopify store. The main problem is that when viewing product images in larger views (zoom) on both mobile and desktop, the images overflow beyond the screen. This makes it difficult for customers to see the full image properly.
I am using Motion Theme.
Here is a sample for overflow product image.
https://mottoplan.com/collections/digital-planners/products/digital-planner-2025-rainbow
How can I fix this?
Thanks in advance!
I can help fix the image overflow issue in the Motion theme by adjusting the CSS. Let me guide you!
Hi @Erdem_2 ,
Please send me a screenshot of the error description, I will check it again, because now I checked and everything works fine
Hi @namphan ,
I attached 2 pictures for 2 different products. They are zoomed pictures.
Because of the quality issue I need to use 2130 x 2130 px and want them not to overflow.
Thanks for your interest and help.
Hi @Erdem_2 ,
Please send me the code of product-images.liquid file, I will check it
Hi @namphan ,
Here it is.
{% comment %}
Parameters
context - used to determine whether on the featured product or main product template
sizes
sizeVariable
fallback
{% endcomment %}
{%- liquid
# Product images and thumbnails on the main product template should load early
if context == 'main-product'
assign loading = 'eager'
endif
-%}
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
{%- unless product.empty? -%}
{%- for media in product.media -%}
{%- render 'media',
section_id: section_id,
media: media,
featured_media: featured_media,
loopIndex0: forloop.index0,
loopIndex: forloop.index,
product_zoom_enable: product_zoom_enable,
product_zoom_size: product_zoom_size,
product_image_size: product_image_size,
isModal: isModal,
video_looping: video_looping,
video_style: video_style,
sizes: sizes,
sizeVariable: sizeVariable,
fallback: fallback,
loading: loading,
-%}
{%- endfor -%}
{%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}
{%- if first_3d_model -%}
{%- endif -%}
{%- if thumbnail_arrows -%}
{%- endif -%}
{%- if product.media.size > 1 -%}
{%- for media in product.media -%}
{%- liquid
assign image_set = false
assign image_set_group = ''
if media.alt contains '#'
assign image_set_full = media.alt | split: '#' | last
if image_set_full contains '_'
assign image_set = true
assign image_set_group = image_set_full | split: '_' | first
endif
endif
-%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{%- endif -%}
{%- if media.media_type == 'model' -%}
{%- endif -%}
{%- capture image_classes -%}
appear-delay-{{ forloop.index | times: 3 }}
{%- endcapture -%}
{%- render 'image-element',
img: media.preview_image,
alt: media.alt | escape | split: '#' | first,
widths: '100, 360, 540',
classes: image_classes,
sizeVariable: '80px',
loading: loading,
-%}
{%- endfor -%}
{%- endif -%}
{%- if thumbnail_arrows -%}
{%- endif -%}
{% if thumbnail_height == 'fixed' %}
{% style %}
.product__photos-{{ section_id }} .product__thumbs:not(.product__thumbs--below) {
min-height: 400px;
max-height: 400px;
}
@media screen and (max-width: 798px) {
.product__photos-{{ section_id }} .product__thumbs:not(.product__thumbs--below) {
min-height: 300px;
max-height: 300px;
}
}
{% endstyle %}
{% endif %}
{%- else -%}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endunless -%}
Hi @Erdem_2 ,
Please send me the code of media.liquid file, the code to change here and I will check it
Hi @namphan ,
Here the media.liquid.file .
{% comment %}
Renders a media element for the product gallery.
Media types include: image, video, external_video and model.
Accepts:
- media: {Object} Media Liquid object (required)
- featured_media: {Object} Media Liquid object (required) - featured media of a given product or variant
- loading {String}
- sizes
- sizeVariable
- fallback
{% endcomment %}
{%- liquid
assign is_featured = false
if featured_media == media
assign is_featured = true
endif
assign has_video = false
assign video_type = ''
assign video_modal = false
assign image_set = false
assign image_set_group = ''
if media.alt contains '#'
assign image_set_full = media.alt | split: '#' | last
if image_set_full contains '_'
assign image_set = true
assign image_set_group = image_set_full | split: '_' | first
endif
endif
-%}
{%- liquid
case media.media_type
when 'external_video'
assign has_video = true
assign video_type = media.host
assign video_id = media.external_id
when 'video'
assign has_video = true
assign video_type = 'mp4'
endcase
if has_video and video_style == 'unmuted'
assign video_modal = true
endif
-%}
{%- liquid
assign media_aspect_ratio = media.aspect_ratio
assign media_width = media.width
assign media_height = media.height
if media.media_type != 'image'
assign media_width = media.preview_image.width
assign media_height = media.preview_image.height
endif
-%}
{%- if media.media_type == 'model' -%}
{%- liquid
if media.preview_image.aspect_ratio
assign media_aspect_ratio = media.preview_image.aspect_ratio
endif
-%}
{{ media | model_viewer_tag: image_size: product_zoom_size, reveal: 'interaction', toggleable: true, data-model-id: media.id }}
{%- else -%}
{%- if has_video and video_style == 'unmuted' -%}
{%- assign media_aspect_ratio = media.preview_image.aspect_ratio -%}
{%- endif -%}
{%- capture image_classes -%}
{% if product_zoom_enable %}photoswipe__image{% endif %}
{%- endcapture -%}
{%- render 'image-element',
img: media.preview_image,
type: 'photoswipe',
classes: image_classes,
alt: media.alt | escape | split: '#' | first,
widths: '360, 540, 720, 900, 1080',
product_zoom_size: product_zoom_size,
loopIndex: loopIndex,
media: media,
media_width: media_width,
media_height: media_height,
sizes: sizes,
sizeVariable: sizeVariable,
fallback: fallback,
loading: loading,
-%}
{%- if product_zoom_enable and media.media_type == 'image' -%}
{%- endif -%}
{%- if has_video and video_modal -%}
{%- if video_type == 'youtube' -%}
[
](https://youtube.com/watch?v={{ media.external_id }})
{%- endif -%}
{%- if video_type == 'vimeo' -%}
[
](https://player.vimeo.com/video/{{ media.external_id }})
{%- endif -%}
{%- if video_type == 'mp4' -%}
{% comment %}
Hidden video element that gets placed in the video modal
{% endcomment %}
{%- endif -%}
{%- endif -%}
{%- if has_video -%}
{%- unless video_modal -%}
{%- if video_type == 'youtube' or video_type == 'vimeo' -%}
{%- endif -%}
{%- if video_type == 'mp4' -%}
{%- endif -%}
{%- endunless -%}
{%- endif -%}
{%- endif -%}
Hi @namphan ,
I sent the file to your inbox.
Hi @Erdem_2 ,
Please go to media.liquid file and change all code:
{% comment %}
Renders a media element for the product gallery.
Media types include: image, video, external_video and model.
Accepts:
- media: {Object} Media Liquid object (required)
- featured_media: {Object} Media Liquid object (required) - featured media of a given product or variant
- loading {String}
- sizes
- sizeVariable
- fallback
{% endcomment %}
{%- liquid
assign is_featured = false
if featured_media == media
assign is_featured = true
endif
assign has_video = false
assign video_type = ''
assign video_modal = false
assign image_set = false
assign image_set_group = ''
if media.alt contains '#'
assign image_set_full = media.alt | split: '#' | last
if image_set_full contains '_'
assign image_set = true
assign image_set_group = image_set_full | split: '_' | first
endif
endif
-%}
{%- liquid
case media.media_type
when 'external_video'
assign has_video = true
assign video_type = media.host
assign video_id = media.external_id
when 'video'
assign has_video = true
assign video_type = 'mp4'
endcase
if has_video and video_style == 'unmuted'
assign video_modal = true
endif
-%}
{%- liquid
assign media_aspect_ratio = media.aspect_ratio
assign media_width = 800
assign media_height = 800
if media.media_type != 'image'
assign media_width = media.preview_image.width
assign media_height = media.preview_image.height
endif
-%}
{%- if media.media_type == 'model' -%}
{%- liquid
if media.preview_image.aspect_ratio
assign media_aspect_ratio = media.preview_image.aspect_ratio
endif
-%}
{{ media | model_viewer_tag: image_size: product_zoom_size, reveal: 'interaction', toggleable: true, data-model-id: media.id }}
{%- else -%}
{%- if has_video and video_style == 'unmuted' -%}
{%- assign media_aspect_ratio = media.preview_image.aspect_ratio -%}
{%- endif -%}
{%- capture image_classes -%}
{% if product_zoom_enable %}photoswipe__image{% endif %}
{%- endcapture -%}
{%- render 'image-element',
img: media.preview_image,
type: 'photoswipe',
classes: image_classes,
alt: media.alt | escape | split: '#' | first,
widths: '360, 540, 720, 900, 1080',
product_zoom_size: product_zoom_size,
loopIndex: loopIndex,
media: media,
media_width: media_width,
media_height: media_height,
sizes: sizes,
sizeVariable: sizeVariable,
fallback: fallback,
loading: loading,
-%}
{%- if product_zoom_enable and media.media_type == 'image' -%}
{%- endif -%}
{%- if has_video and video_modal -%}
{%- if video_type == 'youtube' -%}
[
](https://youtube.com/watch?v={{ media.external_id }})
{%- endif -%}
{%- if video_type == 'vimeo' -%}
[
](https://player.vimeo.com/video/{{ media.external_id }})
{%- endif -%}
{%- if video_type == 'mp4' -%}
{% comment %}
Hidden video element that gets placed in the video modal
{% endcomment %}
{%- endif -%}
{%- endif -%}
{%- if has_video -%}
{%- unless video_modal -%}
{%- if video_type == 'youtube' or video_type == 'vimeo' -%}
{%- endif -%}
{%- if video_type == 'mp4' -%}
{%- endif -%}
{%- endunless -%}
{%- endif -%}
{%- endif -%}
Hi @namphan ,
Thanks for your help.