Solved

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

anthonyneuspeed
Tourist
4 0 1

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?

 

Screenshot 2024-01-12 at 8.41.49 AM.png

Accepted Solution (1)
yashgarg
Shopify Partner
102 26 32

This is an 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 -%}

 

 

 

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com

View solution in original post

Replies 7 (7)

yashgarg
Shopify Partner
102 26 32

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

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
anthonyneuspeed
Tourist
4 0 1

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
Shopify Partner
102 26 32

This is an 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 -%}

 

 

 

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
anthonyneuspeed
Tourist
4 0 1

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?

 

Screenshot 2024-01-12 at 11.26.46 AM.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Thank you SO MUCH for your help!

yashgarg
Shopify Partner
102 26 32

Glad to help 🙂

 

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

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
anthonyneuspeed
Tourist
4 0 1

You're a magician! Thank you SO MUCH!

yashgarg
Shopify Partner
102 26 32

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

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com