I am having an issue where my product images appear blurry when loading only on the product page. It looks like the image size is being limited but am not sure how to fix it. I am using Prestige version 4.7.2. I have run an image optimization app and that has not helped.
https://www.flintleatherco.com/collections/wallet/products/the-marlin-ultra-slim-wallet
Topic summary
A user reports product images appearing blurry exclusively on product pages while using Prestige theme version 4.7.2. The images display correctly elsewhere on the site.
Technical Details:
- Original image dimensions: 2048x2047 pixels
- Issue persists after running an image optimization app
- Problem isolated to product page rendering only
Troubleshooting Attempted:
- User has shared screenshots demonstrating the blurriness
- Provided Liquid code snippets from their product template, including section settings for image zoom, thumbnails, and image stacking configurations
- Shared additional product template code
Current Status:
The issue remains unresolved. The user suspects image size limitations are being applied specifically on product pages but hasn’t identified the root cause or solution. No responses from other community members yet addressing potential fixes or theme-specific settings that might resolve the blurriness.
{%- capture section_settings -%}
{
“enableHistoryState”: true,
“templateSuffix”: {{ product.template_suffix | json }},
“showInventoryQuantity”: {{ section.settings.show_inventory_quantity | json }},
“showSku”: {{ section.settings.show_sku | json }},
“stackProductImages”: {{ section.settings.stack_images | json }},
“showThumbnails”: {{ section.settings.show_thumbnails | json }},
“enableVideoLooping”: {{ section.settings.enable_video_looping | json }},
“inventoryQuantityThreshold”: {{ section.settings.inventory_quantity_threshold }},
“showPriceInButton”: {{ section.settings.show_price_in_button | json }},
“enableImageZoom”: {{ section.settings.enable_image_zoom | json }},
“showPaymentButton”: {{ section.settings.show_payment_button | json }},
“useAjaxCart”: {% if settings.cart_type == ‘drawer’ %}true{% else %}false{% endif %}
}
{%- endcapture -%}
{%- if section.settings.show_share_buttons -%}
{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_media | img_url: ‘1024x’ | prepend: ‘https:’ -%}
{%- comment -%}
PRODUCT GALLERY
{%- endcomment -%}
{%- assign initial_media_id = product.featured_media.id -%}
{%- assign initial_media_index = 0 -%}
{%- assign media_count = 0 -%}
{%- capture slideshow_media -%}
{%- for media in product.media -%}
{%- if media.alt == ‘featured’ or media.alt == ‘featured mobile’ -%}
{%- continue -%}
{%- endif -%}
{%- if product.selected_variant and media.id == product.selected_variant.featured_media.id -%}
{%- assign initial_media_index = media_count -%}
{%- assign initial_media_id = media.id -%}
{%- endif -%}
{%- capture supported_sizes -%}{%- render ‘image-size’, sizes: ‘200,400,600,700,800,900,1000,1200,1400,1600’, image: media -%}{%- endcapture -%}
{%- case media.media_type -%}
{%- when ‘image’ -%}
{%- when ‘external_video’ -%}
{%- when ‘video’ -%}
{%- when ‘model’ -%}
{%- assign media_count = media_count | plus: 1 -%}
{%- endfor -%}
{%- endcapture -%}
{%- if product.media.size > 0 -%}
{%- if action_list_items != blank -%}
{%- capture slideshow_nav -%}
{%- if media_count > 1 -%}
{%- if section.settings.show_thumbnails -%}
{%- capture nav_item_badge -%}
{%- case media.media_type -%}
{%- when ‘model’ -%}
{% render ‘icon’, icon: ‘media-model-badge’ %}
{%- when ‘video’ or ‘external_video’ -%}
{% render ‘icon’, icon: ‘media-video-badge’ %}
{%- endcase -%}
{%- endcapture -%}
{%- if section.settings.stack_images -%}
{{- nav_item_badge -}}
{%- else -%}
{{- nav_item_badge -}}
{%- endif -%}
{%- endfor -%}
{%- if section.settings.stack_images -%}
{%- if section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endif -%}
{%- capture flickity_options -%}
{
“prevNextButtons”: false,
“pageDots”: false,
“adaptiveHeight”: true,
“watchCSS”: true,
“dragThreshold”: 8,
“initialIndex”: {{ initial_media_index }},
“arrowShape”: {“x0”: 20, “x1”: 60, “y1”: 40, “x2”: 60, “y2”: 35, “x3”: 25}
}
{%- endcapture -%}
{%- comment -%}Add the “view in your space” button, which allows to show the product in customer’s environment (if the device supports it){%- endcomment -%}
{%- assign first_3d_model = product.media | where: ‘media_type’, ‘model’ | first -%}
{%- if first_3d_model -%}
{%- render ‘icon’, icon: ‘media-view-in-space’ -%} {{- ‘product.general.view_in_space’ | t -}}
{%- assign yotpo_offload_content = shop.metafields.yotpo.yotpo_offload_content %}
{%- assign time_now = ‘now’ | date: ‘%s’ %}
{%- assign yotpo_live_time = shop.metafields.yotpo.yotpo_live | date: ‘%s’ %}
{%- assign diff_seconds_from_live = time_now | minus: yotpo_live_time %}
{%- assign yotpo_bottomline_last_updated = product.metafields.yotpo.bottomline_update_time | date: ‘%s’ %}
{%- assign diff_seconds_from_last_bottomline_update = time_now | minus: yotpo_bottomline_last_updated %}
{%- if yotpo_live_time and diff_seconds_from_live < 86400 or yotpo_bottomline_last_updated and diff_seconds_from_last_bottomline_update < 86400 -%}
{%- assign yotpo_bottomline_obsolete = false %}
{%- else %}
{%- assign yotpo_bottomline_obsolete = true %}
{%- endif %}
{%- if yotpo_offload_content == ‘yes’ and yotpo_bottomline_obsolete != true -%}
{{ product.metafields.yotpo.bottomline }}
{%- endif %}
{%- if media_count > 1 -%}
{%- comment -%}
IMPLEMENTATION NOTE: The reason we create ourselves our own UI instead of relying of the built-in feature of Flickity is that,
since the media API, Shopify requires to add arrows next to the dot. Unfortunately this layout is not
achievable easily using Flickity options only, so we have to run our own
{%- endcomment -%}
{%- unless section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endunless -%}
{%- capture product_aside -%}
{%- comment -%}
PRODUCT TABS
{%- endcomment -%}
{%- render ‘product-tabs’ -%}
{%- comment -%}
PRODUCT WEAR IT WITH
We allow merchants to add a tag that looks like __with:product-handle to feature an additional product
{%- endcomment -%}
{%- for tag in product.tags -%}
{%- if tag contains ‘__with’ -%}
{%- assign product_handle = tag | split: ‘__with:’ | last -%}
{%- assign associated_product = all_products[product_handle] -%}
{%- if associated_product != empty -%}
{{ 'product.buy_it_with.title' | t }}
{% render ‘product-item’, product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_vendor: false, show_price_on_hover: false %}
{%- break -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}
{%- if product.template_suffix != ‘coming-soon’ -%}
{%- render ‘product-form’, product: product -%}
{%- endif -%}
{%- if section.settings.description_below_add_to_cart -%}
{{ product.description | replace: ‘data-section-type’, ‘data-section-type-placeholder’ }}
{%- if section.settings.show_share_buttons -%}
{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_image | img_url: ‘large’ | prepend: ‘https:’ -%}
{%- if section.settings.stack_images and product_aside != blank and media_count > 0 -%}
{%- endif -%}{%- if product_aside != blank -%}
{%- comment -%}
FEATURED IMAGE
We allow merchants to use one image as a “featured image” by adding the alt tag “featured”
{%- endcomment -%}
{%- for media in product.media -%}
{%- if media.alt == ‘featured’ -%}
{%- assign desk_featured_media = media.preview_image -%}
{%- endif -%}
{%- if media.alt == ‘featured mobile’ -%}
{%- assign mobile_featured_media = media.preview_image -%}
{%- endif -%}
{%- endfor -%}
{%- if desk_featured_media or mobile_featured_media -%}
{%- assign mobile_featured_media = mobile_featured_media | default: desk_featured_media -%}
{%- assign desk_featured_media = desk_featured_media | default: mobile_featured_media -%}
{%- else -%}
/* This is a bit hacky but allows to circumvent the complete independency of section (as next section included in the page does not know anything about this page) */ @media screen and (max-width: 640px) { #shopify-section-{{ section.id }} + .shopify-section--bordered { border-top: 0; } #shopify-section-{{ section.id }} + .shopify-section--bordered > .Section { padding-top: 0; } }{%- endif -%}
{%- comment -%}
PHOTO SWIPE
This is the root container for the zoom functionality. Must not be removed, as order element is important.
{%- endcomment -%}
{%- if section.settings.enable_image_zoom -%}
{% schema %}
{
“name”: “Product page”,
“class”: “shopify-section–bordered”,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_share_buttons”,
“label”: “Show social sharing buttons”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: “Show vendor”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_sku”,
“label”: “Show SKU”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “description_below_add_to_cart”,
“label”: “Description below add to cart”,
“default”: false
},
{
“type”: “select”,
“id”: “selector_mode”,
“label”: “Selector type”,
“options”: [
{
“value”: “block”,
“label”: “Block”
},
{
“value”: “dropdown”,
“label”: “Dropdown”
}
],
“default”: “dropdown”
},
{
“type”: “checkbox”,
“id”: “show_color_swatch”,
“label”: “Show color swatch”,
“default”: false,
“info”: “Some colors appear white? Learn more.”
},
{
“type”: “checkbox”,
“id”: “show_color_carousel”,
“label”: “Show color carousel”,
“info”: “A pop-up selector with variant images for choosing colors. Only enables when color swatch is disabled.”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_quantity_selector”,
“label”: “Show quantity selector”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_inventory_quantity”,
“label”: “Show inventory quantity”,
“info”: “Make sure that your inventory is tracked. Learn more.”,
“default”: false
},
{
“type”: “range”,
“id”: “inventory_quantity_threshold”,
“label”: “Inventory quantity threshold”,
“info”: “Only show inventory quantity if below threshold. Choose 0 to always show.”,
“min”: 0,
“max”: 50,
“step”: 1,
“default”: 0
},
{
“type”: “checkbox”,
“id”: “show_price_in_button”,
“label”: “Show price in add to cart button”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_payment_button”,
“label”: “Show dynamic checkout button”,
“info”: “Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. Learn more”,
“default”: true
},
{
“type”: “header”,
“content”: “Media”
},
{
“type”: “paragraph”,
“content”: “Learn more about media types”
},
{
“type”: “select”,
“id”: “image_size”,
“label”: “Size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “medium”,
“label”: “Medium”
},
{
“value”: “large”,
“label”: “Large”
},
{
“value”: “fill”,
“label”: “Fill screen”
}
],
“default”: “large”
},
{
“type”: “checkbox”,
“id”: “stack_images”,
“label”: “Stack images on desktop”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_thumbnails”,
“label”: “Show thumbnails on desktop”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_image_zoom”,
“label”: “Enable zoom”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_video_looping”,
“label”: “Enable video looping”,
“default”: false
},
{
“type”: “header”,
“content”: “Tabs”
},
{
“type”: “page”,
“id”: “tab_page_1_handle”,
“label”: “First page”
},
{
“type”: “page”,
“id”: “tab_page_2_handle”,
“label”: “Second page”
},
{
“type”: “paragraph”,
“content”: “The theme also allows you to add specific tabs for a given product only. Learn more about this feature.”
},
{
“type”: “header”,
“content”: “Reviews”
},
{
“type”: “paragraph”,
“content”: “You need to install Shopify’s free Product Reviews app before enabling this option.”
},
{
“type”: “checkbox”,
“id”: “reviews_enabled”,
“label”: “Enable”,
“default”: false
},
{
“type”: “header”,
“content”: “Featured image”
},
{
“type”: “paragraph”,
“content”: “You can highlight an image after product tabs by adding the ALT tag "featured" to a given image. Learn more.”
},
{
“type”: “select”,
“id”: “featured_image_size”,
“label”: “Section size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “normal”,
“label”: “Normal”
},
{
“value”: “large”,
“label”: “Large”
}
],
“default”: “large”
}
]
}
{% endschema %}
I have product-template.liquid shared above
