Image blurry on Shopify Polyform theme

[rachelloh]

I notice blurry images on my collection page but it looks fine on product page, anyone have solution on this? 

[namphan]

Hi @rachelloh,

Please send me the store link, I will check it for you

[rachelloh]

Hi Namphan, here you go. da7f12-f6.myshopify.com

[namphan]

Hi @rachelloh,

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

[rachelloh]

{% comment %}
Renders a product card

Accepts:
- card_product: {Object} Product Liquid object (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_stock_state: {Boolean} Show the state in stock. Default: false
- show_quick_add: {Boolean} Show the quick add button.
- button: {Object} Settings for hover button.
- section_id: {String} The ID of the section that contains this card.
- section: {Object} Section Liquid object. (optional)
- lookbook: {Boolean} Settings for lookbook. Default: false. (optional)
- lookbook: {String} Classes for lookbook. Default: false. (optional)
- text_theme: {String} Settings for text color. (optional)

Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor, show_quick_add: section.settings.show_quick_add, show_stock_state: section.settings.show_stock_state %}
{% endcomment %}

{% liquid
assign lookbook = lookbook | default: false
assign quick_buy = false
assign variants_length = card_product.variants | size
unless variants_length > 1
assign quick_buy = true
endunless
%}

<div class="product-card">
<div class="product-card-main">
<div class="relative group overflow-hidden">
<a href="{{ card_product.url }}" title="{{ card_product.title | escape }}"
class="card-image relative group block {{ lookbookClasses }}">
{% if card_product.featured_media %}
<picture>
{% if lookbook or product_tabs %}
<source media="(min-width: 768px)"
srcset="{{ card_product.featured_media | image_url: width: 544, height: 544, crop: "center" }}"/>
<source media="(min-width: 375px)"
srcset="{{ card_product.featured_media | image_url: width: 336, height: 336, crop: "center" }}"/>
{% else %}
<source media="(min-width: 768px)"
srcset="{{ card_product.featured_media | image_url: width: 340, height: 340, crop: "center" }}"/>
{% endif %}
<source srcset="{{ card_product.featured_media | image_url: width: 156, height: 156, crop: "center" }}"/>
{% liquid
if card_product.featured_media.alt != blank
assign image_alt = card_product.featured_media.alt
else
assign image_alt = card_product.title
endif
%}
<img src="{{ card_product.featured_media | image_url: width: 340, height: 340, crop: "center" }}"
width="340"
height="340"
alt="{{ image_alt }}"
class="w-full h-full object-cover"
loading="lazy"
>
</picture>

{%- if card_product.media[1] != null and show_secondary_image -%}
<picture>
{% if lookbook %}
<source media="(min-width: 768px)"
srcset="{{ card_product.media[1] | image_url: width: 544, height: 544, crop: "center" }}"/>
{% else %}
<source media="(min-width: 768px)"
srcset="{{ card_product.media[1] | image_url: width: 340, height: 340, crop: "center" }}"/>
{% endif %}
<source srcset="{{ card_product.media[1] | image_url: width: 156, height: 156, crop: "center" }}"/>
{% liquid
if card_product.media[1].alt != blank
assign image_alt = card_product.media[1].alt
else
assign image_alt = card_product.title
endif
%}
<img src="{{ card_product.media[1] | image_url: width: 340, height: 340, crop: "center" }}"
width="340"
height="340"
alt="{{ image_alt }}"
class="absolute top-0 left-0 w-full h-full bg-light object-cover opacity-0 invisible transition-all duration-500 md:group-hover:opacity-100 md:group-focus-within:opacity-100 group-focus-within:visible group-hover:visible group-focus-within:scale-110 group-hover:scale-110 max-sm:hidden"
loading="lazy"
>
</picture>
{%- endif -%}
{% else %}
{{ placeholder_image | placeholder_svg_tag: 'bg-dark-10 w-full h-full object-cover' }}
{% endif %}
</a>
{%- if card_product.compare_at_price > card_product.price and card_product.available -%}
{% liquid
assign old_price = card_product.compare_at_price
assign price = card_product.price | default: 1999
assign num = old_price | minus: price
assign sale_percentage = num | times: 100 | divided_by: old_price
%}
<div class="absolute top-0 left-0 w-full p-8 text-right grid gap-6">
<div>
<span class="inline-block px-16 py-4 bg-dark text-light text-caption rounded-full">-{{ sale_percentage }}%</span>
</div>
</div>
{%- endif -%}
{%- if button != 'none' -%}
<div class="card-image-content max-md:hidden absolute left-0 bottom-0 right-0 p-24 flex flex-col justify-end">
{%- case button -%}
{%- when 'quick_view' -%}
{% render 'quick-view-button', product_url: card_product.url, product_title: card_product.title, quick_view: true %}
{%- when 'quick_buy' -%}
{% if quick_buy %}
{%- assign product_form_id = 'product-form-' | append: card_product.id -%}
<product-form class="relative" data-cart-type="{{ settings.cart_type }}">
{%- form 'product',
card_product,
id: product_form_id,
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
{% render 'add-to-cart-btn',
class: " opacity-0 group-hover:opacity-100 group-focus-within:opacity-100",
product: card_product,
product_card: true,
section_id: section_id,
product_form_id: product_form_id,
quick_view: false
%}
{%- endform -%}
</product-form>
{% else %}
{% render 'quick-view-button', product_url: card_product.url, product_title: card_product.title %}
{% endif %}
{%- endcase -%}
</div>
{%- endif -%}
</div>
<div class="pt-16">
<div class="text-p-small">
<h3 {% if text_theme == "light" %}class="text-light"{% endif %}>
{% liquid
assign title_class = "break-words max-w-full hover-underline-animation"
assign card_title = card_product.title | default: "Example product title"
if text_theme == " light"
assign title_class = title_class | append: "hover:text-light"
endif
%}
{{ card_title | link_to: card_product.url, class: title_class, lang: request.locale.iso_code }}
</h3>
<div class="flex items-center flex-wrap">
{%- liquid
assign compare_at_price = card_product.compare_at_price
assign price = card_product.price
-%}
<p class="font-bold{% if text_theme == "light" %} text-light{% endif %}">
{% liquid
assign price = card_product.price | default: 1999
assign money_price = price | money
if settings.currency_code_enabled
assign money_price = price | money_with_currency
endif
if card_product.price_varies
assign money_price = 'products.product.price.from_price_html' | t: price: money_price
endif
%}
{{ money_price }}
</p>
{% if compare_at_price > price %}
<span class="inline-flex ml-8 text-caption{% if text_theme == "light" %} text-light{% else %} text-light-subdued{% endif %}">
<s>{{ card_product.compare_at_price_max | money }}</s>
</span>
{% endif %}
</div>
<small class="block mt-8 uppercase text-caption{% if card_product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}{% if text_theme == "light" %} text-light{% endif %}">
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
<span>
<span>{{- card_product.selected_or_first_available_variant.unit_price | money -}}</span>
<span aria-hidden="true">/</span>
<span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
<span>
{%- if card_product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
{{- card_product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ card_product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
</span>
</span>
</small>
{%- if show_vendor -%}
<div class="rich-text text-p-small{% if text_theme == "light" %} text-light{% else %} text-light-subdued{% endif %}">
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
<p>{{ card_product.vendor | default: "Vendor" }}</p>
</div>
{%- endif -%}
</div>

{%- if show_stock_state -%}
<div class="flex items-center max-sm:text-caption text-p-small mt-4{% if text_theme == "light" %} text-light{% else %} text-dark-60{% endif %}">
{% if card_product.available %}
{% render 'svg-icons', icon: 'icon-checkmark-circle', class: "w-14 h-14 mr-4" %}
{% else %}
{% render 'svg-icons', icon: 'icon-close-circle', class: "w-14 h-14 mr-4" %}
{% endif %}
{% if card_product.available %}{{ 'products.product.on_stock' | t }}{% else %}{{ 'products.product.out_of_stock' | t }}{% endif %}
</div>
{%- endif -%}

{% if card_product.options_by_name['Color'] %}
{% liquid
assign colors = card_product.options_by_name['Color'].values | sort_natural
assign product_variants = card_product.variants | sort_natural
%}
<div class="product-color-variants max-md:hidden mt-8 flex items-center">
<ul class="flex items-center gap-2 flex-wrap">
{% assign colors_num = settings.product_card_colors_num %}
{% for value in colors limit: colors_num %}
{% for variant in product_variants %}
{% if variant.title contains value %}
{% if value.swatch.color or value.swatch.image %}
{% liquid
assign color_light = false
if value.swatch.image
assign image_url = value.swatch.image | image_url: width: 14
assign swatch_value = 'url(' | append: image_url | append: ')'
elsif value.swatch.color
assign swatch_value = 'rgb(' | append: value.swatch.color.rgb | append: ')'
if value.swatch.color.lightness > 95
assign color_light = true
endif
else
assign swatch_value = false
endif
%}
<li>
<a href="{{ variant.url }}"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="{{ value }}"
class="block w-14 h-14 border{% if color_light %} border-light-material{% else %} border-light{% endif %} rounded-1 transition-colors hover:border-light hover:outline hover:outline-1 hover:outline-brand"
{% if swatch_value %}style='background: {{ swatch_value }}'{% endif %}>
<span class="visually-hidden">{{ value }}</span>
</a>
</li>
{% break %}
{% else %}
<li class="flex">
<a href="{{ variant.url }}"
class="btn btn-small btn-outline py-0 px-6 min-h-0 text-caption{% if text_theme == "light" %} text-light{% endif %}"
title="{{ value }}"
>
{{ value }}
</a>
</li>
{% break %}
{% endif %}
{% endif %}
{% endfor %}
{% endfor %}
</ul>
{% if colors.size > colors_num %}
<p class="ml-4 text-dark-60 text-caption">
+{{ colors.size | minus: colors_num }}
</p>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>

[namphan · Accepted solution]

Hi @rachelloh,

Please change all code:

{% comment %}
Renders a product card

Accepts:
- card_product: {Object} Product Liquid object (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_stock_state: {Boolean} Show the state in stock. Default: false
- show_quick_add: {Boolean} Show the quick add button.
- button: {Object} Settings for hover button.
- section_id: {String} The ID of the section that contains this card.
- section: {Object} Section Liquid object. (optional)
- lookbook: {Boolean} Settings for lookbook. Default: false. (optional)
- lookbook: {String} Classes for lookbook. Default: false. (optional)
- text_theme: {String} Settings for text color. (optional)

Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor, show_quick_add: section.settings.show_quick_add, show_stock_state: section.settings.show_stock_state %}
{% endcomment %}

{% liquid
assign lookbook = lookbook | default: false
assign quick_buy = false
assign variants_length = card_product.variants | size
unless variants_length > 1
assign quick_buy = true
endunless
%}

<div class="product-card">
<div class="product-card-main">
<div class="relative group overflow-hidden">
<a href="{{ card_product.url }}" title="{{ card_product.title | escape }}"
class="card-image relative group block {{ lookbookClasses }}">
{% if card_product.featured_media %}
<picture>
{% if lookbook or product_tabs %}
<source media="(min-width: 768px)"
srcset="{{ card_product.featured_media | image_url: width: 896, height: 896, crop: "center" }}"/>
<source media="(min-width: 375px)"
srcset="{{ card_product.featured_media | image_url: width: 896, height: 896, crop: "center" }}"/>
{% else %}
<source media="(min-width: 768px)"
srcset="{{ card_product.featured_media | image_url: width: 896, height: 896, crop: "center" }}"/>
{% endif %}
<source srcset="{{ card_product.featured_media | image_url: width: 896, height: 896, crop: "center" }}"/>
{% liquid
if card_product.featured_media.alt != blank
assign image_alt = card_product.featured_media.alt
else
assign image_alt = card_product.title
endif
%}
<img src="{{ card_product.featured_media | image_url: width: 896, height: 896, crop: "center" }}"
width="896"
height="896"
alt="{{ image_alt }}"
class="w-full h-full object-cover"
loading="lazy"
>
</picture>

{%- if card_product.media[1] != null and show_secondary_image -%}
<picture>
{% if lookbook %}
<source media="(min-width: 768px)"
srcset="{{ card_product.media[1] | image_url: width: 896, height: 896, crop: "center" }}"/>
{% else %}
<source media="(min-width: 768px)"
srcset="{{ card_product.media[1] | image_url: width: 896, height: 896, crop: "center" }}"/>
{% endif %}
<source srcset="{{ card_product.media[1] | image_url: width: 896, height: 896, crop: "center" }}"/>
{% liquid
if card_product.media[1].alt != blank
assign image_alt = card_product.media[1].alt
else
assign image_alt = card_product.title
endif
%}
<img src="{{ card_product.media[1] | image_url: width: 896, height: 896, crop: "center" }}"
width="896"
height="896"
alt="{{ image_alt }}"
class="absolute top-0 left-0 w-full h-full bg-light object-cover opacity-0 invisible transition-all duration-500 md:group-hover:opacity-100 md:group-focus-within:opacity-100 group-focus-within:visible group-hover:visible group-focus-within:scale-110 group-hover:scale-110 max-sm:hidden"
loading="lazy"
>
</picture>
{%- endif -%}
{% else %}
{{ placeholder_image | placeholder_svg_tag: 'bg-dark-10 w-full h-full object-cover' }}
{% endif %}
</a>
{%- if card_product.compare_at_price > card_product.price and card_product.available -%}
{% liquid
assign old_price = card_product.compare_at_price
assign price = card_product.price | default: 1999
assign num = old_price | minus: price
assign sale_percentage = num | times: 100 | divided_by: old_price
%}
<div class="absolute top-0 left-0 w-full p-8 text-right grid gap-6">
<div>
<span class="inline-block px-16 py-4 bg-dark text-light text-caption rounded-full">-{{ sale_percentage }}%</span>
</div>
</div>
{%- endif -%}
{%- if button != 'none' -%}
<div class="card-image-content max-md:hidden absolute left-0 bottom-0 right-0 p-24 flex flex-col justify-end">
{%- case button -%}
{%- when 'quick_view' -%}
{% render 'quick-view-button', product_url: card_product.url, product_title: card_product.title, quick_view: true %}
{%- when 'quick_buy' -%}
{% if quick_buy %}
{%- assign product_form_id = 'product-form-' | append: card_product.id -%}
<product-form class="relative" data-cart-type="{{ settings.cart_type }}">
{%- form 'product',
card_product,
id: product_form_id,
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
{% render 'add-to-cart-btn',
class: " opacity-0 group-hover:opacity-100 group-focus-within:opacity-100",
product: card_product,
product_card: true,
section_id: section_id,
product_form_id: product_form_id,
quick_view: false
%}
{%- endform -%}
</product-form>
{% else %}
{% render 'quick-view-button', product_url: card_product.url, product_title: card_product.title %}
{% endif %}
{%- endcase -%}
</div>
{%- endif -%}
</div>
<div class="pt-16">
<div class="text-p-small">
<h3 {% if text_theme == "light" %}class="text-light"{% endif %}>
{% liquid
assign title_class = "break-words max-w-full hover-underline-animation"
assign card_title = card_product.title | default: "Example product title"
if text_theme == " light"
assign title_class = title_class | append: "hover:text-light"
endif
%}
{{ card_title | link_to: card_product.url, class: title_class, lang: request.locale.iso_code }}
</h3>
<div class="flex items-center flex-wrap">
{%- liquid
assign compare_at_price = card_product.compare_at_price
assign price = card_product.price
-%}
<p class="font-bold{% if text_theme == "light" %} text-light{% endif %}">
{% liquid
assign price = card_product.price | default: 1999
assign money_price = price | money
if settings.currency_code_enabled
assign money_price = price | money_with_currency
endif
if card_product.price_varies
assign money_price = 'products.product.price.from_price_html' | t: price: money_price
endif
%}
{{ money_price }}
</p>
{% if compare_at_price > price %}
<span class="inline-flex ml-8 text-caption{% if text_theme == "light" %} text-light{% else %} text-light-subdued{% endif %}">
<s>{{ card_product.compare_at_price_max | money }}</s>
</span>
{% endif %}
</div>
<small class="block mt-8 uppercase text-caption{% if card_product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}{% if text_theme == "light" %} text-light{% endif %}">
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
<span>
<span>{{- card_product.selected_or_first_available_variant.unit_price | money -}}</span>
<span aria-hidden="true">/</span>
<span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
<span>
{%- if card_product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
{{- card_product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ card_product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
</span>
</span>
</small>
{%- if show_vendor -%}
<div class="rich-text text-p-small{% if text_theme == "light" %} text-light{% else %} text-light-subdued{% endif %}">
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
<p>{{ card_product.vendor | default: "Vendor" }}</p>
</div>
{%- endif -%}
</div>

{%- if show_stock_state -%}
<div class="flex items-center max-sm:text-caption text-p-small mt-4{% if text_theme == "light" %} text-light{% else %} text-dark-60{% endif %}">
{% if card_product.available %}
{% render 'svg-icons', icon: 'icon-checkmark-circle', class: "w-14 h-14 mr-4" %}
{% else %}
{% render 'svg-icons', icon: 'icon-close-circle', class: "w-14 h-14 mr-4" %}
{% endif %}
{% if card_product.available %}{{ 'products.product.on_stock' | t }}{% else %}{{ 'products.product.out_of_stock' | t }}{% endif %}
</div>
{%- endif -%}

{% if card_product.options_by_name['Color'] %}
{% liquid
assign colors = card_product.options_by_name['Color'].values | sort_natural
assign product_variants = card_product.variants | sort_natural
%}
<div class="product-color-variants max-md:hidden mt-8 flex items-center">
<ul class="flex items-center gap-2 flex-wrap">
{% assign colors_num = settings.product_card_colors_num %}
{% for value in colors limit: colors_num %}
{% for variant in product_variants %}
{% if variant.title contains value %}
{% if value.swatch.color or value.swatch.image %}
{% liquid
assign color_light = false
if value.swatch.image
assign image_url = value.swatch.image | image_url: width: 14
assign swatch_value = 'url(' | append: image_url | append: ')'
elsif value.swatch.color
assign swatch_value = 'rgb(' | append: value.swatch.color.rgb | append: ')'
if value.swatch.color.lightness > 95
assign color_light = true
endif
else
assign swatch_value = false
endif
%}
<li>
<a href="{{ variant.url }}"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="{{ value }}"
class="block w-14 h-14 border{% if color_light %} border-light-material{% else %} border-light{% endif %} rounded-1 transition-colors hover:border-light hover:outline hover:outline-1 hover:outline-brand"
{% if swatch_value %}style='background: {{ swatch_value }}'{% endif %}>
<span class="visually-hidden">{{ value }}</span>
</a>
</li>
{% break %}
{% else %}
<li class="flex">
<a href="{{ variant.url }}"
class="btn btn-small btn-outline py-0 px-6 min-h-0 text-caption{% if text_theme == "light" %} text-light{% endif %}"
title="{{ value }}"
>
{{ value }}
</a>
</li>
{% break %}
{% endif %}
{% endif %}
{% endfor %}
{% endfor %}
</ul>
{% if colors.size > colors_num %}
<p class="ml-4 text-dark-60 text-caption">
+{{ colors.size | minus: colors_num }}
</p>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>

[rachelloh]

Solved! Thank you!

[namphan]

Hi @rachelloh,

If you have any questions, you can contact me directly.
Happy to help you 😊

[BSS-TekLabs]

Hello @rachelloh 
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

[rachelloh]

Hi team, here you go. 

Domain: da7f12-f6.myshopify.com

Password: rootartisan1234