Hi!
I would like to display product SKU on the collection page of the Craft theme, right after the title. I have searched for tutorials, but I can’t find the template I need to edit in the code, can anyone help me? Thanks.
@SoniaO - please find your product template section, you will have product page title code in it
@suyash1 In that template (main-product.liquid), I have added to show the SKU on the product page:
{% assign current_variant = product.selected_or_first_available_variant %}
{{ current_variant.sku }}
What I want is to show it on the collections page, on the product card, but I have not managed to know exactly in which template of the Craft theme, and I am also not very clear what code to put, I guess the same.
@SoniaO - please check if you have collection grid item or product card sections, should be one of these 2
@suyash1 Thank you. I have tried with those two templates, but maybe I have put a wrong code, or in the wrong place.
Could you please tell me which code to use and where exactly?
@SoniaO - code’s correct, may be wrong place only
@suyash1 It still doesn’t work, I can’t find the right place, or the code is not correct. Any more concrete clues?
@SoniaO - sorry not much idea then
@suyash1 thank you anyway
hello, SoniaO. Can you share a screenshot of where in the product-card/collection-grid item file you are inserting the code?
Hi @SoniaO ,
please insert below code in card-product.liquid to show first variant’s sku on collection listing.
**SKU:** {{ card_product.variants[0].sku }}
@gr_trading Thank you.
But where? because I have tried to place it in several places and I can’t get it to show anything.
@Uhrick I send you the code of card-product.liquide, Where am I supposed to insert it? I have tried several sites and deleted it again as it does nothing.
{% 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
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 == nil
assign ratio = 1
endif
-%}
{%- if card_product.featured_media -%}
{%- endif -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
![{{ card_product.featured_media.alt | escape }}]()
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
{%- if card_product.media[1] != nil 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 -%}
{{ 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: ‘’ %}
{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
{%- if card_product.variants.size == 1 -%}
{%- 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 }}
{%- endform -%}
{%- else -%}
{{ 'products.product.choose_options' | t }}
{%- endif -%}
{% render 'icon-close' %}
{%- 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 -%}
{{ 'onboarding.product_title' | t }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%}
{% render 'price' %}
@gr_trading Perfect! Thank you so much! It works! 
@gr_trading Y… can the text be modified and made smaller if it is not too much to ask?
**SKU:** {{ card_product.variants[0].sku }}
In above code, you can write anything you want at place of {SKU:}.
for font change
**SKU:** {{ card_product.variants[0].sku }}
Change font size value to 12px to number you want.
@gr_trading Fantastic! Thank you so much!
This was really helpful to me! I have a question. I have added several lines of info to the product card in the Craft theme. Is there a way to make the line break disappear if the metafields are blank? Here is the code I am using in the product card template:
{{ card_product.metafields.custom.author_first }} {{ card_product.metafields.custom.author_last }}
{{ card_product.metafields.custom.artist_type }} {{ card_product.metafields.custom.artist }}
Publication {{ card_product.variants[0].barcode }}
The middle line is blank on some products (artist_type and artist).
I used
because if I used separate
for each line there was too much space between them.
Thanks!
Matt
hi @MKpublishing ,
use the below code to achieve this.
{% if card_product.metafields.custom.author_first != blank %}
{{ card_product.metafields.custom.author_first }} {{ card_product.metafields.custom.author_last }}
{{ card_product.metafields.custom.artist_type }} {{ card_product.metafields.custom.artist }}
Publication {{ card_product.variants[0].barcode }}
{% endif %}
Hope this will help…
1 Like