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

[anthonyneuspeed]

Hey all! I'm sure this is an easy fix for most, but this is a new, unlaunched theme we are working on and this is kind of our last step.

I want to add the product SKU (or first available SKU) to the product card that shows on the collections pages.

I'd like it just under the Vendor name, and above the product name. The text would ideally look similar to either the Vendor name, or the Product subtitle text (something small).

Can anyone help?

[yashgarg]

Hey @anthonyneuspeed ,

I don't have access to Enterprise theme, so cannot tell the exact steps. But you can follow this approach (which worked in dawn theme) -

In Edit Code - Find the file card-product.liquid file, then find for keywords card__vendor and card__title. Essentially you want to add your text between these two <p> tags. So add another <p> tag like added for card__vendor, and then use {{ card_product.variants.first.sku }} as template string.

Thanks

Yash Garg

[anthonyneuspeed]

Does this help? I think I see where it needs to go, but I want to get it right if I can!

<div class="card__info-container flex flex-col flex-auto relative">
<div class="card__info w-full">
<div class="card__info-inner{% if settings.card_price_bottom %} flex flex-col h-full{% else %} inline-block{% endif %} w-full">
{%- if settings.card_show_vendor -%}
<p class="card__vendor{% if settings.show_dividers %} mb-1{% else %} mb-0{% endif %} text-sm text-theme-light">
{{- product.vendor -}}
</p>
{%- endif -%}

<p class="card__title font-bold{% if settings.show_dividers %} mb-1{% else %} mt-1 mb-0{% endif %}">
<a href="{{ product_url }}" class="card-link text-current js-prod-link">
{{- product.title | escape -}}
</a>
</p>

{%- if settings.card_show_subtitle and product.metafields.descriptors.subtitle != blank -%}
<p class="card__subtitle text-sm text-current mb-1{% unless settings.show_dividers %} mt-1{% endunless %}">
{{ product.metafields.descriptors.subtitle }}
</p>
{%- endif -%}

[yashgarg · Accepted solution]

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

<div class="card__info-container flex flex-col flex-auto relative">
<div class="card__info w-full">
<div class="card__info-inner{% if settings.card_price_bottom %} flex flex-col h-full{% else %} inline-block{% endif %} w-full">
{%- if settings.card_show_vendor -%}
<p class="card__vendor{% if settings.show_dividers %} mb-1{% else %} mb-0{% endif %} text-sm text-theme-light">
{{- product.vendor -}}
</p>
{%- endif -%}

<p class="{% if settings.show_dividers %} mb-1{% else %} mb-0{% endif %} text-sm text-theme-light">

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

</p>

<p class="card__title font-bold{% if settings.show_dividers %} mb-1{% else %} mt-1 mb-0{% endif %}">
<a href="{{ product_url }}" class="card-link text-current js-prod-link">
{{- product.title | escape -}}
</a>
</p>

{%- if settings.card_show_subtitle and product.metafields.descriptors.subtitle != blank -%}
<p class="card__subtitle text-sm text-current mb-1{% unless settings.show_dividers %} mt-1{% endunless %}">
{{ product.metafields.descriptors.subtitle }}
</p>
{%- endif -%}

[anthonyneuspeed]

Amazing!

Lastly, in the example shown in the photo below, I've put in a prefix "SKU:", which now shows as "SKU:99.10.PM7". How can I add a space between "SKU:" and "99.10.PM7" in this case?

Thank you SO MUCH for your help!

[yashgarg]

Glad to help 🙂

For this issue, just remove the minus after {{. ie. => SKU:   {{ product.variants.first.sku -}}, see the first minus has been removed.

[anthonyneuspeed]

You're a magician! Thank you SO MUCH!

[yashgarg]

For the benefit of someone who comes across this in future, I have created a Youtube video and blog post for the same.

Post: https://shopifocus.com/index.php/2024/01/14/add-product-sku-to-product-card-on-collections-page/

Video: https://youtu.be/jY_b5TEGk5I

[BirgitteWad]

Great stuff, just wonder if it is possible to make the text bigger, see my page, the SKU is smaller than the others

https://bagpotten.dk/collections/ulter-enderor

Henrik