Add Product SKU to Product Card on Collections Page - Enterprise Theme

Store Design
,

Topic summary

Goal: display a product’s SKU (Stock Keeping Unit) beneath the vendor and above the product title on collection page product cards.

Implementation: edit card-product.liquid and insert a new

between the vendor (card__vendor) and title (card__title) blocks. Output the first variant’s SKU with Liquid: {{ product.variants.first.sku }} and style it similar to the vendor (text-sm, text-theme-light).

Formatting detail: to show a “SKU:” prefix with a space, avoid Liquid’s whitespace trimming. Remove the leading hyphen in the output tag (use {{ product.variants.first.sku }} instead of {{- product.variants.first.sku -}}) so the space after “SKU:” is preserved.

Outcome: the SKU successfully appears in the desired position; spacing issue resolved. A blog post and YouTube tutorial were shared for reference.

Open item: a follow-up asks how to make the SKU text larger, noting it appears smaller than other text; no answer yet.

Artifacts central to understanding: a code snippet in card-product.liquid is key; screenshots are illustrative but not required for the solution.

Summarized with AI on December 24. AI used: gpt-5.
4

Thanks for sharing this. You can add this code after vendor block like this:




{%- if settings.card_show_vendor -%}


{{- product.vendor -}}


{%- endif -%}

{{- product.variants.first.sku -}}



{{- product.title | escape -}}

{%- if settings.card_show_subtitle and product.metafields.descriptors.subtitle != blank -%}


{{ product.metafields.descriptors.subtitle }}


{%- endif -%}