Add Sku to Collection Page

Solved
Highlighted
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
Highlighted
Shopify Partner
154 23 32

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

Highlighted
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
Highlighted
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
Highlighted
Shopify Partner
154 23 32

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.

Highlighted
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
Highlighted
Shopify Partner
154 23 32

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