Add Sku to Collection Page

[KathyP]

Looking for help regarding adding product sku to my collection page, at present i can see my sku on each individual page but when i look on my collection page it only has the vendor product title and price.  See image below.  I am using venture theme can anyone help?

[antonkogan]

Is it possible for you to provide this code for warehouse 2.0 theme? also we are trying to have product sku and weight show on the cart page in smaller font under the item title (both in cart drawer and cart page) is this possible? 

[DušanMijušković]

@Sasha2 do you know how to do this on Dawn theme? I've been trying to figure out the solution for days.

[Sasha2]

Hi @DušanMijušković 

Yeah, for the Dawn theme you have to use a little another way.

You have to paste this one code:

<div class="product-sku h5">{{ product_card_product.first_available_variant.sku }}</div>

To the snippet called "product-card.liquid".

The upper code have to be pasted right before the Vendor's output code

{%- if show_vendor -%}
   <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
   <div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
{%- endif -%}

So, in the result, you have get this one code structure:

<div class="product-sku h5">{{ product_card_product.first_available_variant.sku }}</div>
{%- if show_vendor -%}
   <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
   <div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
{%- endif -%}

Here the screenshot for reference: 

[DušanMijušković]

Hey @Sasha2 ,

Thanks for the reply. I've added the code where you said (although I don't have product-card, but card-product), and nothing happens as you can see from screenshot below. I don't want to bother you if there isn't an easy fix.

[Sasha2]

@DušanMijušković  Do not worry,

You have to just replace the SKU code snippet.

Here the right one: 

<div class="product-sku h5">{{ card_product.first_available_variant.sku | default: card_product.variants[0].sku }}</div>

[DušanMijušković]

@Sasha2 That did it! Thank you very much!

[MattB4]

I'm trying to have the SKU update when a new variant is selected on the collection page.   Is this easy to do?

EDIT: Changed product page to collection page