Add Sku to Collection Page

Solved
KathyP
New Member
2 0 0

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?

 

Capture.JPG

0 Likes
Sasha2
Shopify Partner
168 23 36

This is an accepted solution.

Hi @KathyP 

 

A SKU of the first available product variant can be added for Collection page by adding one line of code to the "product-card.liquid" snippet of your theme.

Here the code that have to be added:

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

To show a SKU right at the top of a Product vendor, kindly add the code right before Vendor's code:

{% if settings.product_vendor_enable %}
  <div class="product-card__brand">{{ product.vendor }}</div>
{% endif %}

So, the result would be next one:

<div class="product-sku">{{ product.first_available_variant.sku }}</div>
{% if settings.product_vendor_enable %}
  <div class="product-card__brand">{{ product.vendor }}</div>
{% endif %}

Here the screenshot for the reference: http://prntscr.com/sxl51f

KathyP
New Member
2 0 0

Your a Legend Sasha2 it worked.... i had tried so many different things and it was one line of code.  Thanks heaps

0 Likes
Natahn-FMS
New Member
1 0 0

That worked for me as well thankyou but only shows sku if product is in stock, Can I make it show on products out of stock as well?

0 Likes
Sasha2
Shopify Partner
168 23 36

This is an accepted solution.

@Natahn-FMS 

Sure, to show SKU of the first product variant (no matter, does it available or sold out), instead {{ product.first_available_variant.sku }} code, just use {{ product.variants[0].sku }} code.

mrscsmith
New Member
2 0 0

 

Hi all,

im using SUPPLY theme and having same issue, can you offer advice where i can add code to show SKU on my collection page

many thanks in advance

 

Screenshot_2.jpg

 

 

0 Likes
Sasha2
Shopify Partner
168 23 36

Hi @mrscsmith,

For the Supply theme, it is enough to place the code

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

 

In the "product-grid-item.liquid" snippet right before the {{ product.title }} block:

supply-theme-to-add-sku.png

 

0 Likes
Party4all
Tourist
6 0 0

Hi Sasha

I used your code for the collection page in Venture theme and it looks fine thank you so much for this. So now I would love to add same Sku to the productpage itself if possible ? We are not int. in showing the Vendor so if possible a code without this if you know how

I cross my fingers for your help

Linda

0 Likes
Sasha2
Shopify Partner
168 23 36

Hi @Party4all,

Sure, here you go:

To have an SKU for a Product page, kindly insert this one code:

<p class="product-single__vendor">SKU: {{ product.first_available_variant.sku | default: product.variants[0].sku }}</p>

To the product-template.liquid section right before a Product title code:

Screenshot_1.png

 

Party4all
Tourist
6 0 0

Hmm this only adds another SKU on my collection page ? and still no Sku on the produkt page You can see below how the code looks now...

Skærmbillede 2020-12-13 kl. 18.54.14.pngSkærmbillede 2020-12-13 kl. 18.55.17.png

0 Likes