Image blurry on Shopify Polyform theme

Store Design
,
1

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

2

Hi @rachelloh ,

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

3

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.

4

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

5

Hi team, here you go.

Domain: da7f12-f6.myshopify.com

Password: rootartisan1234

6

Hi @rachelloh ,

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

7

{% 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
%}

{% if card_product.featured_media %} {% if lookbook or product_tabs %} {% else %} {% endif %} {% liquid if card_product.featured_media.alt != blank assign image_alt = card_product.featured_media.alt else assign image_alt = card_product.title endif %} {{ image_alt }}

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

{% if lookbook %}

{% else %} {% endif %} {% liquid if card_product.media[1].alt != blank assign image_alt = card_product.media[1].alt else assign image_alt = card_product.title endif %} {{ image_alt }} {%- endif -%} {% else %} {{ placeholder_image | placeholder_svg_tag: 'bg-dark-10 w-full h-full object-cover' }} {% endif %} {%- 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 %}
-{{ sale_percentage }}%
{%- endif -%} {%- if button != 'none' -%}
{%- 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 -%} {%- 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 -%} {% else %} {% render 'quick-view-button', product_url: card_product.url, product_title: card_product.title %} {% endif %} {%- endcase -%}
{%- 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 }}

{%- liquid assign compare_at_price = card_product.compare_at_price assign price = card_product.price -%}

{% 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 }}

{% if compare_at_price > price %} {{ card_product.compare_at_price_max | money }} {% endif %}
{{ 'products.product.price.unit_price' | t }} {{- card_product.selected_or_first_available_variant.unit_price | money -}} /  {{ 'accessibility.unit_price_separator' | t }}  {%- 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 }} {%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}

{{ card_product.vendor | default: "Vendor" }}

{%- endif -%}

{%- if show_stock_state -%}

{% 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 %}
{%- 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
%}

    {% 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 %}
  • {{ value }}
    • {% break %} {% else %}
  • {{ value }}
    • {% break %} {% endif %} {% endif %} {% endfor %} {% endfor %}
{% if colors.size > colors_num %}

+{{ colors.size | minus: colors_num }}

{% endif %}
{% endif %}
8

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
%}

{% if card_product.featured_media %}

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

{%- endif -%}
{% else %}
{{ placeholder_image | placeholder_svg_tag: 'bg-dark-10 w-full h-full object-cover' }}
{% endif %}

{%- 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
%}

-{{ sale_percentage }}%

{%- endif -%}
{%- if button != 'none' -%}

{%- 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 -%}

{% else %}
{% render 'quick-view-button', product_url: card_product.url, product_title: card_product.title %}
{% endif %}
{%- endcase -%}

{%- 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 }}

{%- liquid
assign compare_at_price = card_product.compare_at_price
assign price = card_product.price
-%}

{% 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 }}

{% if compare_at_price > price %}

~~{{ card_product.compare_at_price_max | money }}~~

{% endif %}

<small>
{{ 'products.product.price.unit_price' | t }}

{{- card_product.selected_or_first_available_variant.unit_price | money -}}
/
 {{ 'accessibility.unit_price_separator' | t }} 

{%- 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 }}

</small>
{%- if show_vendor -%}

{{ 'accessibility.vendor' | t }}

{{ card_product.vendor | default: "Vendor" }}

{%- endif -%}

{%- if show_stock_state -%}

{% 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 %}

{%- 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
%}

{% 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
%}
- {{ value }}

{% break %}
{% else %}
- {{ value }}

{% break %}
{% endif %}
{% endif %}
{% endfor %}
{% endfor %}

{% if colors.size > colors_num %}

+{{ colors.size | minus: colors_num }}

{% endif %}

{% endif %}
9

Solved! Thank you!

10

Hi @rachelloh ,

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