Collections Page Images Are Low Quality Though Image is High Res

[tendtome]

Hi,

The hero images on my collection page are blurry, yet they are high res images and are clear on the product page and home page.

Why are they blurry (low res) on the collection page and how can i resolve this?

Website: www.uspsystems.com.au

Password: parnki

[suyash1]

@tendtome - are you familiar with the coding? if yes then please go to collection template code and check if you can find any setting or code which is downgrading the product image size

because I can see that your original image size is 1100px width, but on collection page it is taking 360px and hence it looks screeched

[tendtome]

i found this…

[suyash1]

@tendtome - please open that grid file and check what code do you have in it

[tendtome]

oh im not sure hoe to do that, i only know very basic.

[suyash1]

@tendtome - search main collection product grid file, check what code is it using

[tendtome]

[suyash1]

@tendtome - check if you can find word product-grid

[tendtome]

{% schema %}
{
“name”: “t:sections.main-collection-product-grid.name”,
“class”: “section”,
“settings”: [
{
“type”: “range”,
“id”: “products_per_page”,
“min”: 8,
“max”: 24,
“step”: 4,
“default”: 16,
“label”: “t:sections.main-collection-product-grid.settings.products_per_page.label”
},
{
“type”: “range”,
“id”: “columns_desktop”,
“min”: 1,
“max”: 5,
“step”: 1,
“default”: 4,
“label”: “t:sections.main-collection-product-grid.settings.columns_desktop.label”
},
{
“type”: “header”,
“content”: “t:sections.main-collection-product-grid.settings.header__3.content”
},
{
“type”: “select”,
“id”: “image_ratio”,
“options”: [
{
“value”: “adapt”,
“label”: “t:sections.main-collection-product-grid.settings.image_ratio.options__1.label”
},
{
“value”: “portrait”,
“label”: “t:sections.main-collection-product-grid.settings.image_ratio.options__2.label”
},
{
“value”: “square”,
“label”: “t:sections.main-collection-product-grid.settings.image_ratio.options__3.label”
}
],
“default”: “adapt”,
“label”: “t:sections.main-collection-product-grid.settings.image_ratio.label”
},
{
“type”: “checkbox”,
“id”: “show_secondary_image”,
“default”: false,
“label”: “t:sections.main-collection-product-grid.settings.show_secondary_image.label”
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“default”: false,
“label”: “t:sections.main-collection-product-grid.settings.show_vendor.label”
},
{
“type”: “checkbox”,
“id”: “show_rating”,
“default”: false,
“label”: “t:sections.main-collection-product-grid.settings.show_rating.label”,
“info”: “t:sections.main-collection-product-grid.settings.show_rating.info”
},
{
“type”: “checkbox”,
“id”: “enable_quick_add”,
“default”: false,
“label”: “t:sections.main-collection-product-grid.settings.enable_quick_buy.label”
},
{
“type”: “header”,
“content”: “t:sections.main-collection-product-grid.settings.header__1.content”
},
{
“type”: “checkbox”,
“id”: “enable_filtering”,
“default”: true,
“label”: “t:sections.main-collection-product-grid.settings.enable_filtering.label”,
“info”: “t:sections.main-collection-product-grid.settings.enable_filtering.info”
},
{
“type”: “select”,
“id”: “filter_type”,
“options”: [
{
“value”: “horizontal”,
“label”: “t:sections.main-collection-product-grid.settings.filter_type.options__1.label”
},
{
“value”: “vertical”,
“label”: “t:sections.main-collection-product-grid.settings.filter_type.options__2.label”
},
{
“value”: “drawer”,
“label”: “t:sections.main-collection-product-grid.settings.filter_type.options__3.label”
}
],
“default”: “horizontal”,
“label”: “t:sections.main-collection-product-grid.settings.filter_type.label”,
“info”: “t:sections.main-collection-product-grid.settings.filter_type.info”
},
{
“type”: “checkbox”,
“id”: “enable_sorting”,
“default”: true,
“label”: “t:sections.main-collection-product-grid.settings.enable_sorting.label”
},
{
“type”: “header”,
“content”: “t:sections.main-collection-product-grid.settings.header_mobile.content”
},
{
“type”: “select”,
“id”: “columns_mobile”,
“default”: “2”,
“label”: “t:sections.main-collection-product-grid.settings.columns_mobile.label”,
“options”: [
{
“value”: “1”,
“label”: “t:sections.main-collection-product-grid.settings.columns_mobile.options__1.label”
},
{
“value”: “2”,
“label”: “t:sections.main-collection-product-grid.settings.columns_mobile.options__2.label”
}
]
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
]
}
{% endschema %}

[tendtome]

{%- if collection.products.size == 0 -%}

{{ 'sections.collection_template.empty' | t -}}
{{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: 'underlined-link link' }}

{%- else -%}

{%- for product in collection.products -%} {% assign lazy_load = false %} {%- if forloop.index > 2 -%} {%- assign lazy_load = true -%} {%- endif -%}
• {% render 'card-product', card_product: product, media_aspect_ratio: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, lazy_load: lazy_load, show_quick_add: section.settings.enable_quick_add, section_id: section.id %}
{%- endfor -%}

[suyash1]

@tendtome - please open this file - card-product

[tendtome]

done, what am i looking for?

[suyash1]

@tendtome - card media, check if you have any code which is downgrading the quality of an image

[Dan-From-Ryviu]

Hi @tendtome

You can change image ratio setting of image in collection page from Online store > Themes > Customize > Collections > select your collection template > Product grid > Image ratio

[suyash1]

@tendtome - please try this solution given by @Dan-From-Ryviu , it can work

[tendtome]

[tendtome]

oit says adapt to image, however the image is not clear

[Dan-From-Ryviu]

The issue is the original image size you uploaded is smaller than the render size displayed. Please use higher-quality images to solve it.

[tendtome]

im confused the file i uploaded was 4032 x 3024 px

[Dan-From-Ryviu]

Hi @tendtome

You can try to edit future image code in card-product.liquid liquid file like this image below to check if it solve the issue