How to display product type in product card under product title

[agarwalyashh]

How to display product type in product card under product title

[pawankumar]

Hi @agarwalyashh
I hope you are doing good, You can add that via product liquid variable using

{{product.type}}

Product variable be different in your case, like card_product so you can replace product with that.
Please check if it helps you.
Thanks!

[okur90]

Hi @agarwalyashh

The exact file you need to edit may vary depending on your theme, but it’s usually called product-card.liquid, product-grid-item.liquid, or similar. If you share the code, I will be happy to edit it for you. Otherwise, locate the code that outputs the product title. It should look something like this:

## {{ product.title | escape }}

and add the following code right after the product title code.

{{ product.type }}

This code will output the product type.

[Ujjaval]

@agarwalyashh you can add below code in card-product.liquid

{{ card_product.type | escape }} 

Here , you can see in below pic product type is appear underneath of product title.

[agarwalyashh]

{% 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)
• 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)
• show_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)

Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}

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

class="
card
card–{{ settings.card_style }}
{% if card_product.featured_media %} card–media{% else %}
card–text{% endif %}
{% if settings.card_style == ‘card’ %} color-{{
settings.card_color_scheme }} gradient{% endif %}
{% if extend_height %} card–extend-height{% endif %}
{% if card_product.featured_media == nil and settings.card_style ==
‘card’ %} ratio{% endif %}
{% if horizontal_class %} card–horizontal{% endif %}
"
style=“–ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;”

class=“card__inner {% if settings.card_style == ‘standard’
%}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if
card_product.featured_media or settings.card_style == ‘standard’ %} ratio{%
endif %}”
style=“–ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;”

{%- if card_product.featured_media -%}

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

srcset="
{%- if card_product.featured_media.width >= 165 -%}{{
card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.featured_media.width >= 360 -%}{{
card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.featured_media.width >= 533 -%}{{
card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.featured_media.width >= 720 -%}{{
card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.featured_media.width >= 940 -%}{{
card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.featured_media.width >= 1066 -%}{{
card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.featured_media | image_url }} {{
card_product.featured_media.width }}w
"
src=“{{ card_product.featured_media | 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=“{{ card_product.featured_media.alt | escape }}”
class=“motion-reduce”
{% unless lazy_load == false %}
loading=“lazy”
{% endunless %}
width=“{{ card_product.featured_media.width }}”
height=“{{ card_product.featured_media.height }}”

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

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

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

{%- endif -%}

class=“card__heading”
{% if card_product.featured_media == null and
settings.card_style == ‘standard’ %}
id=“title-{{ section_id }}-{{ card_product.id }}”
{% endif %}

href=“{{ card_product.url }}”
id=“StandardCardNoMediaLink-{{ section_id }}-{{
card_product.id }}”
class=“full-unstyled-link”
aria-labelledby=“StandardCardNoMediaLink-{{ section_id
}}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{
card_product.id }}”

{{ card_product.title | escape }}

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

id=“NoMediaStandardBadge-{{ section_id }}-{{ card_product.id
}}”
class=“badge badge–bottom-left color-{{
settings.sold_out_badge_color_scheme }}”

{{- ‘products.product.sold_out’ | t -}}

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

id=“NoMediaStandardBadge-{{ section_id }}-{{ card_product.id
}}”
class=“badge badge–bottom-left color-{{
settings.sale_badge_color_scheme }}”

{{- ‘products.product.on_sale’ | t -}}

{%- endif -%}

class=“card__heading{% if card_product.featured_media or
settings.card_style == ‘standard’ %} h5{% endif %}”
{% if card_product.featured_media or settings.card_style ==
‘card’ %}
id=“title-{{ section_id }}-{{ card_product.id }}”
{% endif %}

href=“{{ card_product.url }}”
id=“CardLink-{{ section_id }}-{{ card_product.id }}”
class=“full-unstyled-link”
aria-labelledby=“CardLink-{{ section_id }}-{{ card_product.id
}} Badge-{{ section_id }}-{{ card_product.id }}”

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

class=“rating”
role=“img”
aria-label=“{{ ‘accessibility.star_reviews_info’ | t:
rating_value: card_product.metafields.reviews.rating.value, rating_max:
card_product.metafields.reviews.rating.value.scale_max }}”

aria-hidden=“true”
class=“rating-star color-icon-{{ settings.accent_icons }}”
style=“–rating: {{
card_product.metafields.reviews.rating.value.rating | floor }};
–rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }};
–rating-decimal: {{ rating_decimal }};”

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

{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render ‘judgeme_widgets’, widget_type: ‘removed’, concierge_install:
true, product: card_product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
{% render ‘price’, product: card_product, price_class: ‘’ %}

{%- if show_quick_add -%}

{%- 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
-%}
{%- if card_product.variants.size > 1 or qty_rules -%}

id=“{{ product_form_id }}-submit”
type=“submit”
name=“add”
class=“quick-add__submit button button–full-width
button–secondary{% if horizontal_quick_add %} card–horizontal__quick-add
animate-arrow{% endif %}”
aria-haspopup=“dialog”
aria-labelledby=“{{ product_form_id }}-submit title-{{
section_id }}-{{ card_product.id }}”
data-product-url=“{{ card_product.url }}”

{{ ‘products.product.choose_options’ | t }}
{%- if horizontal_quick_add -%}
{% render ‘icon-arrow’ %}
{%- endif -%}

aria-hidden=“true”
focusable=“false”
class=“spinner”
viewBox=“0 0 66 66”
xmlns=“http://www.w3.org/2000/svg”

cx=“33” cy=“33” r=“30”>

class=“quick-add-modal”>

role=“dialog”
aria-label=“{{ ‘products.product.choose_product_options’
| t: product_name: card_product.title | escape }}”
aria-modal=“true”
class=“quick-add-modal__content global-settings-popup”
tabindex=“-1”

id=“ModalClose-{{ card_product.id }}”
type=“button”
class=“quick-add-modal__toggle”
aria-label=“{{ ‘accessibility.close’ | t }}”

{% render ‘icon-close’ %}

class=“quick-add-modal__content-info”>

{%- else -%}

{%- form ‘product’,
card_product,
id: product_form_id,
class: ‘form’,
novalidate: ‘novalidate’,
data-type: ‘add-to-cart-form’
-%}

type=“hidden”
name=“id”
value=“{{
card_product.selected_or_first_available_variant.id }}”
disabled

id=“{{ product_form_id }}-submit”
type=“submit”
name=“add”
class=“quick-add__submit button button–full-width
button–secondary{% if horizontal_quick_add %}
card–horizontal__quick-add{% endif %}”
aria-haspopup=“dialog”
aria-labelledby=“{{ product_form_id }}-submit title-{{
section_id }}-{{ card_product.id }}”
aria-live=“polite”
data-sold-out-message=“true”
{% if
card_product.selected_or_first_available_variant.available == false %}
disabled
{% endif %}

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

aria-hidden=“true”
focusable=“false”
class=“spinner”
viewBox=“0 0 66 66”
xmlns=“http://www.w3.org/2000/svg”

cx=“33” cy=“33” r=“30”>

{%- endform -%}

{%- endif -%}

{%- endif -%}

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

id=“Badge-{{ section_id }}-{{ card_product.id }}”
class=“badge badge–bottom-left color-{{
settings.sold_out_badge_color_scheme }}”

{{- ‘products.product.sold_out’ | t -}}

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

id=“Badge-{{ section_id }}-{{ card_product.id }}”
class=“badge badge–bottom-left color-{{
settings.sale_badge_color_scheme }}”

{{- ‘products.product.on_sale’ | t -}}

{%- endif -%}

{%- else -%}

class="
card
card–{{ settings.card_style }}
card–text
{% if extend_height %} card–extend-height{% endif %}
{% if settings.card_style == ‘card’ %} color-{{
settings.card_color_scheme }} gradient{% endif %}
{% if card_product.featured_media == nil and settings.card_style ==
‘card’ %} ratio{% endif %}
{{ horizontal_class }}
"
style=“–ratio-percent: 100%;”

class=“card__inner {% if settings.card_style == ‘standard’
%}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if
settings.card_style == ‘standard’ %} ratio{% endif %}”
style=“–ratio-percent: 100%;”

class=“full-unstyled-link”>
{{ ‘onboarding.product_title’ | t }}

{{ ‘onboarding.product_title’ | t }}

{%- if show_vendor -%}
{{ ‘accessibility.vendor’ | t
}}

{{
‘products.product.vendor’ | t }}

{%- endif -%}
{% render ‘price’ %}

{%- endif -%}

[pawankumar]

Hi @agarwalyashh
In the product card, above this line “{%- if show_vendor -%}”
Put

{{card_product.type}}

Thanks!

[agarwalyashh]

Thanks for your valuable advice. Worked well !

[Malik_007]

How To Display Product Category in Product Card Under Product Title Hi @Ujjaval can you help me?