Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Image blurry on Shopify Polyform theme

Solved

Image blurry on Shopify Polyform theme

rachelloh
New Member
5 0 0

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

Accepted Solution (1)
namphan
Shopify Partner
1932 251 279

This is an 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>
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 9 (9)

namphan
Shopify Partner
1932 251 279

Hi @rachelloh,

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

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
rachelloh
New Member
5 0 0

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

namphan
Shopify Partner
1932 251 279

Hi @rachelloh,

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

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
rachelloh
New Member
5 0 0

{% 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
Shopify Partner
1932 251 279

This is an 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>
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
rachelloh
New Member
5 0 0

Solved! Thank you!

namphan
Shopify Partner
1932 251 279

Hi @rachelloh,

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

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

BSS-TekLabs
Shopify Partner
2350 688 810

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
rachelloh
New Member
5 0 0

Hi team, here you go. 

Domain: da7f12-f6.myshopify.com

Password: rootartisan1234