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

Store Design
,
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
Screenshot 2024-01-12 at 8.41.49 AM.png1732×1020 162 KB

2

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

tags. So add another

tag like added for card__vendor, and then use {{ card_product.variants.first.sku }} as template string.

Thanks

Yash Garg

3

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




{%- if settings.card_show_vendor -%}


{{- product.vendor -}}


{%- endif -%}



{{- product.title | escape -}}

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


{{ product.metafields.descriptors.subtitle }}


{%- endif -%}

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

5

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
Screenshot 2024-01-12 at 11.26.46 AM.png560×1114 126 KB

Thank you SO MUCH for your help!

6

Glad to help :slightly_smiling_face:

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

7

You’re a magician! Thank you SO MUCH!

1 Like
8

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

1 Like
9

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