Images are very high res and load on the main page and collection pages perfectly, however on the individual product pages the photos are blurry, but if you click on them they are clear again.
I have tired several fixes and nothing is working, and help would be very much appreciated. It is not a very professional look at all.
Thank you so much, if you can give a little more info on exactly where I can find “lazzy” loading to disable it that would be most appreciated. I am newer to Shopify and been digging in the code and trying a few things but nothing has worked yet.
Thank you so much. I am fairly new to editing the code in Shopify, would you be able to provide a few more detailed steps around the above to help me find the right settings to edit
Hi @RadishDijital ,
Please send the website link, I will check it for you
So here is the store..
https://shop.radishdijital.com/
when you see the photos here they are clear, but when you look here…
https://shop.radishdijital.com/products/fortress-brightstone-255-401-75-75-ocm-formless-foil-1st-edition-logo
They look horrible, and if you click on that picture to magnify it, it is clear again.
So trying to find out how to make that middle step look as good as the others.
Hi @RadishDijital ,
Please go to Actions > Edit code > snippets > product-thumbnail.liquid file.
Please send me the code of the file, I will check and guide you
Thank you . Here is the code:
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}
Renders a product thumbnail with a modal-opener
Accepts:
Usage:
{% render ‘product-thumbnail’,
media: media,
position: forloop.index,
loop: section.settings.enable_video_looping,
modal_id: section.id
%}
{% endcomment %}
{%- liquid
unless lazy_load == false
assign lazy = ‘lazy’
endunless
assign desktop_columns = 1
if desktop_layout == ‘columns’ and media_count > 1
assign desktop_columns = 2
endif
assign mobile_columns = 1
if mobile_layout == ‘columns’ and media_count > 1
assign mobile_columns = 2
endif
if media.media_type == ‘image’
assign image_class = ‘image-magnify-’ | append: section.settings.image_zoom
endif
-%}
{%- capture sizes -%}
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | divided_by: desktop_columns | round }}px, (min-width: 990px) calc({{ media_width | times: 100 | divided_by: desktop_columns }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / {{ mobile_columns }} - 4rem)
{%- endcapture -%}
{%- if media.media_type != ‘image’ -%}
{%- if media.media_type == ‘model’ -%}
{%- else -%}
{%- endif -%}
{%- if media.media_type == ‘model’ -%}
{{ ‘products.product.media.play_model’ | t }}
{{- ‘icon-3d-model.svg’ | inline_asset_content -}}
{%- else -%}
{{ ‘products.product.media.play_video’ | t }}
{{- ‘icon-play.svg’ | inline_asset_content -}}
{%- endif -%}
{{
media.preview_image
| image_url: width: 1946
| image_tag:
loading: lazy,
sizes: sizes,
widths: ‘246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946’
}}
{%- liquid
case media.media_type
when ‘external_video’
assign video_class = ‘js-’ | append: media.host
if media.host == ‘youtube’
echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: ‘lazy’
else
echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: ‘lazy’
endif
when ‘video’
echo media | media_tag: image_size: ‘2048x’, autoplay: true, loop: loop, controls: true, preload: ‘none’
when ‘model’
echo media | media_tag: image_size: ‘2048x’, toggleable: true
endcase
-%}
{%- if media.media_type == ‘model’ -%}
{%- if xr_button -%}
<button
class=“button button–full-width product__xr-button”
type=“button”
aria-label=“{{ ‘products.product.xr_button_label’ | t }}”
data-shopify-xr
data-shopify-model3d-id=“{{ media.id }}”
data-shopify-title=“{{ product.title | escape }}”
data-shopify-xr-hidden
Hi @RadishDijital ,
Please change all code:
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}
Renders a product thumbnail with a modal-opener
Accepts:
- media: {Object} Product Media object
- media_count: {Number} Number of media objects
- position: {String} Position of the media. Used for accessible label.
- desktop_layout: {String} Layout of the media for desktop.
- mobile_layout: {String} Layout of the media for mobile.
- loop: {Boolean} Enable video looping (optional)
- modal_id: {String} The product modal that will be shown by clicking the thumbnail
- xr_button: {Boolean} Renders the "View in your space" button (shopify-xr-button) if the media is a 3D Model
- constrain_to_viewport: {Boolean} Force media height to fit within viewport
- media_fit: {String} Method ("contain" or "cover") to fit image into container
- media_width: {Float} The width percentage that the media column occupies on desktop.
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
Usage:
{% render 'product-thumbnail',
media: media,
position: forloop.index,
loop: section.settings.enable_video_looping,
modal_id: section.id
%}
{% endcomment %}
{%- liquid
unless lazy_load == false
assign lazy = 'lazy'
endunless
assign desktop_columns = 1
if desktop_layout == 'columns' and media_count > 1
assign desktop_columns = 2
endif
assign mobile_columns = 1
if mobile_layout == 'columns' and media_count > 1
assign mobile_columns = 2
endif
if media.media_type == 'image'
assign image_class = 'image-magnify-' | append: section.settings.image_zoom
endif
-%}
{%- capture sizes -%}
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | divided_by: desktop_columns | round }}px, (min-width: 990px) calc({{ media_width | times: 100 | divided_by: desktop_columns }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / {{ mobile_columns }} - 4rem)
{%- endcapture -%}
{%- if media.media_type != 'image' -%}
{%- if media.media_type == 'model' -%}
{%- if xr_button -%}
{%- endif -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
Thank you so very much. This looks so much better.