Blurry pictures on collection page - Refresh Theme

DTours · August 25, 2024, 2:37pm

Hi everyone, I need some help regarding the collection on the homepage of my website.

The pictures in the collection are all blurry even though they are clear on the product page. I have tried the 2048 x 2048 size that Shopify recommends for product pictures as well as bigger and smaller sizes. The pictures are crystal clear when I download them from Canva and on the product pages as well. But on the collection page, they are blurry.

Does anyone have an idea how I can solve this issue (refresh theme)?

Thank you very much!

namphan · August 25, 2024, 2:51pm

Hi @DTours ,

Please send me the code of card-product.liquid file, I will check it for you

DTours · August 25, 2024, 2:57pm

Hi @namphan

thanks for the reply! Here is the code:

{% comment %}
Renders a product card

Accepts:

card_product: {Object} Product Liquid object (optional)
media_aspect_ratio: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
image_shape: {String} Image mask to apply to the product image card. Values are “arch”, “blob”, “chevronleft”, “chevronright”, “diamond”, “parallelogram”, and “round”. (optional)
show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
show_vendor: {Boolean} Show the product vendor. Default: false
show_rating: {Boolean} Show the product rating. Default: false
extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
skip_styles: {Boolean} Don’t include component styles. Useful when rendering multiple product cards in a loop. Default: false (optional)
quick_add: {Boolean} Show the quick add button.
section_id: {String} The ID of the section that contains this card.
horizontal_class: {Boolean} Add a card–horizontal class if set to true. Default: false (optional)
horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
placeholder_image: {String} The placeholder image to use when no product exists. Default: ‘product-apparel-2’ (optional)

Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}
{%- unless skip_styles -%}
{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}
{{ ‘component-volume-pricing.css’ | asset_url | stylesheet_tag }}

{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘quick-order-list.css’ | asset_url | stylesheet_tag }}
{{ ‘quantity-popover.css’ | asset_url | stylesheet_tag }}
{%- endunless -%}
{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == ‘adapt’
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} ${{ card_product.featured_media.alt | escape }}$ {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != null and show_secondary_image -%}
<img
srcset="
{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
"
src=“{{ card_product.media[1] | image_url: width: 533 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“”
class=“motion-reduce”
loading=“lazy”
width=“{{ card_product.media[1].width }}”
height=“{{ card_product.media[1].height }}”

{%- endif -%}

{%- if card_product.available == false -%} {{- 'products.product.sold_out' | t -}} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{- 'products.product.on_sale' | t -}} {%- endif -%}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}

{%- endif -%}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{- card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max -}}

({{ card_product.metafields.reviews.rating_count }}) {{- card_product.metafields.reviews.rating_count }} {{ 'accessibility.total_reviews' | t -}}

{%- endif -%}

{% render ‘price’, product: card_product, price_class: ‘’, show_compare_at_price: true %}
{%- if card_product.quantity_price_breaks_configured? -%}
{% if card_product.variants.size == 1 and quick_add == ‘bulk’ %}
{% liquid
assign quantity_rule = card_product.selected_or_first_available_variant.quantity_rule
assign has_qty_rules = false
if quantity_rule.increment > 1 or quantity_rule.min > 1 or quantity_rule.max != null
assign has_qty_rules = true
endif
%}

{{ ‘products.product.volume_pricing.note’ | t }}

{{ ‘products.product.volume_pricing.note’ | t }}

{% else %}

{% endif %} {% if card_product.variants.size == 1 and quick_add == 'bulk' %}

{%- if has_qty_rules -%}

{%- if quantity_rule.increment > 1 -%} {{- 'products.product.quantity.multiples_of' | t: quantity: quantity_rule.increment -}} {%- endif -%} {%- if quantity_rule.min > 1 -%} {{- 'products.product.quantity.min_of' | t: quantity: quantity_rule.min -}} {%- endif -%} {%- if quantity_rule.max != null -%} {{- 'products.product.quantity.max_of' | t: quantity: quantity_rule.max -}} {%- endif -%}

{%- endif -%} {%- render 'icon-close' -%} {%- if card_product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}

{{ card_product.selected_or_first_available_variant.quantity_rule.min }}+ {%- assign price = card_product.selected_or_first_available_variant.price | money_with_currency -%} {{ 'sections.quick_order_list.each' | t: money: price }}
{{- price_break.minimum_quantity -}} + {%- assign price = price_break.price | money_with_currency -%} {{ 'sections.quick_order_list.each' | t: money: price }}

{%- endif -%}

{% endif %} {%- endif -%}

{% assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id %} {% if quick_add == 'standard' %}

{%- liquid assign qty_rules = false if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1 assign qty_rules = true endif -%} {%- if card_product.variants.size > 1 or qty_rules -%} {{ 'products.product.choose_options' | t }} {%- if horizontal_quick_add -%} {% render 'icon-arrow' %} {%- endif -%} {%- render 'loading-spinner' -%}

{% render 'icon-close' %}

{%- else -%} {%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} {%- if card_product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} {{ 'products.product.sold_out' | t }} {%- if horizontal_quick_add -%} {% render 'icon-plus' %} {%- endif -%} {%- render 'loading-spinner' -%} {%- endform -%} {%- endif -%}

{% elsif quick_add == 'bulk' %} {% if card_product.variants.size == 1 %} {% if card_product.selected_or_first_available_variant.available == false %} {{ 'products.product.sold_out' | t }} {{ 'products.product.sold_out' | t }} {% else %} {% render 'quantity-input', variant: card_product.selected_or_first_available_variant, min: 0 %} {% endif %} {% else %}

{%- liquid assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id assign qty_rules = false if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1 assign qty_rules = true endif -%} {{ 'products.product.choose_options' | t }} {%- render 'loading-spinner' -%}

{% render 'icon-close' %}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} ${{ card_product.featured_media.alt | escape }}$ {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- endif -%} {{ 'products.product.view_full_details' | t -}} {% render 'icon-arrow' %}

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %} {%- if card_product.quantity_price_breaks_configured? -%}

{%- endif -%}

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %} {%- if card_product.quantity_price_breaks_configured? -%}

{%- endif -%}

{% endif %} {% endif %}

{%- if card_product.available == false -%} {{- 'products.product.sold_out' | t -}} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{- 'products.product.on_sale' | t -}} {%- endif -%}

{%- else -%} {%- liquid assign ratio = 1 if media_aspect_ratio == 'portrait' assign ratio = 0.8 endif -%}

{%- if placeholder_image -%} {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }} {%- else -%} {{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}

{%- endif -%} {% render 'price', show_compare_at_price: true %}

{%- endif -%}

namphan · August 25, 2024, 3:00pm

Hi @DTours ,

Please change all code:

{% comment %}
Renders a product card

Accepts:
- card_product: {Object} Product Liquid object (optional)
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- image_shape: {String} Image mask to apply to the product image card. Values are "arch", "blob", "chevronleft", "chevronright", "diamond", "parallelogram", and "round". (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_rating: {Boolean} Show the product rating. Default: false
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
- skip_styles: {Boolean} Don't include component styles. Useful when rendering multiple product cards in a loop. Default: false (optional)
- quick_add: {Boolean} Show the quick add button.
- section_id: {String} The ID of the section that contains this card.
- horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
- horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
- placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-2' (optional)

Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{%- unless skip_styles -%}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}

{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'quick-order-list.css' | asset_url | stylesheet_tag }}
{{ 'quantity-popover.css' | asset_url | stylesheet_tag }}
{%- endunless -%}
{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}

{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != null and show_secondary_image -%}

{%- endif -%}

{%- endif -%}

### 

{{ card_product.title | escape }}

{%- if card_product.available == false -%}

{{- 'products.product.sold_out' | t -}}

{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}

{{- 'products.product.on_sale' | t -}}

{%- endif -%}

### 

{{ card_product.title | escape }}

{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}

{{ card_product.vendor }}

{%- endif -%}

{{ block.settings.description | escape }}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{- card_product.metafields.reviews.rating.value }} /
{{ card_product.metafields.reviews.rating.value.scale_max -}}

({{ card_product.metafields.reviews.rating_count }})

{{- card_product.metafields.reviews.rating_count }}
{{ 'accessibility.total_reviews' | t -}}

{%- endif -%}

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
{%- if card_product.quantity_price_breaks_configured? -%}
{% if card_product.variants.size == 1 and quick_add == 'bulk' %}
{% liquid
assign quantity_rule = card_product.selected_or_first_available_variant.quantity_rule
assign has_qty_rules = false
if quantity_rule.increment > 1 or quantity_rule.min > 1 or quantity_rule.max != null
assign has_qty_rules = true
endif
%}

{% endif %}
{%- endif -%}

{% assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id %}
{% if quick_add == 'standard' %}

{%- liquid
assign qty_rules = false
if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
assign qty_rules = true
endif
-%}
{%- if card_product.variants.size > 1 or qty_rules -%}

{%- else -%}

{%- endif -%}

{% elsif quick_add == 'bulk' %}
{% if card_product.variants.size == 1 %}

{% else %}

{%- liquid
assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
assign qty_rules = false
if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
assign qty_rules = true
endif
-%}

{% endif %}
{% endif %}

{%- if card_product.available == false -%}

{{- 'products.product.sold_out' | t -}}

{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}

{{- 'products.product.on_sale' | t -}}

{%- endif -%}

{%- else -%}
{%- liquid
assign ratio = 1
if media_aspect_ratio == 'portrait'
assign ratio = 0.8
endif
-%}

{%- if placeholder_image -%}
{{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
{%- else -%}
{{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}

### 

{{ 'onboarding.product_title' | t }}

{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}

{{ 'products.product.vendor' | t }}

{%- endif -%}
{% render 'price', show_compare_at_price: true %}

{%- endif -%}

DTours · August 25, 2024, 3:07pm

Hi @namphan ,

It worked! Thank you so much!

May I ask what the issue was that made the pictures blurry?

namphan · August 25, 2024, 3:58pm

Hi @DTours ,

Because the image is displayed optimized, so it will display smaller size and it causes blur.

I changed it to the correct size of the image and it displays fine

namphan · August 25, 2024, 4:10pm

Hi @DTours ,

If you have any questions, you can contact me directly.
Nice to meet you

VicZ · October 4, 2024, 4:08am

Hi Sir/Madam, may I know, to update whole code for which file ?
Thanks a million.

Best regards,
Vic

Topic		Replies	Views
How to improve the quality of a product image on homepage when linking to a product? refresh theme Store Design design	7	61	October 1, 2024
Productos en blanco! Español	3	25	August 28, 2025
Make featured collection images clickable- dawn theme Store Design customizations , css , shopify-themes	0	13	March 13, 2024
Removing image compression for large product image as part of a collage on homepage. dawn theme Technical Q&A css	7	45	November 1, 2022
How To Increase Image Resolution in Collage.Liquid Store Design	8	237	March 28, 2024

Blurry pictures on collection page - Refresh Theme

{{ card_product.title | escape }}

{{ card_product.title | escape }}

{{ card_product.title | escape }}

{{ card_product.title | escape }}

{{ 'onboarding.product_title' | t }}

Related topics