shopifocus.com

Recently someone on Shopify Discussions asked how they can add Product SKU to Product Cards on Collections Page. In this post, we will be looking at how you can do the same. If you prefer watching video over reading, checkout this video instead:

Note: Before going ahead I want to mention one important point – the technique discussed in this post only works properly for simple products (which have no variants). And for the products with variants, SKU of the first variant will be shown.

First let’s talk about how to do it for Dawn theme. Here’s a look of how my main collections page look right now. I want to add SKU between title and price of the product cards.

To achieve this we will need to make changes in card-product.liquid file.

To open this file follow these steps:
1) Go to your online store and select Themes from left panel
2) Press 3 dots menu in center (on the left of Customize button) and then Edit Code
3) Open the file card-product.liquid (you can search for it)

In this file, search for the first occurrence of div with class “card-information“
This is the div that holds card related information (which comes after the title)

Here we can add text to show the product SKU. For this step, I would advice you to copy the line “<div class=”caption-with-letter-spacing light”>{{ card_product.vendor }}</div>” (i.e line 165 in above image) and paste it just above this vendor block (i.e. line 162 in above image). It is better to copy and paste such lines from template itself, as these have classes mentioned which give text proper styling (similar to other elements).

Now replace the template field {{ card_product.vendor }} with {{ card_product.variants.first.sku }} . It is clear from this template field name that this will show the SKU of first variant of the product. So after making these changes, you should be seeing something like this:

Save your changes, and on refreshing, you will have the SKU value in between the product name and price, something like this:

The above solution was for Dawn theme, but you can use the same technique for other themes as well. The original user who asked this question, asked this in context of Enterprise theme, and wanted to add the SKU between title and vendor name. As it turns out, the Enterprise theme also has a card-product.liquid file, there were some differences in the actual code though. For example, the user provided me with following snippet from the file:

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

It was clear that new code needs to be inserted in between these two blocks which represents vendor and title respectively.

So I advised that user to paste the code which was responsible for vendor text, and then replace product.vendor with product.variants.first.sku, and it worked properly. So the final code became:

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

For more context, you can checkout the above mentioned Shopify discussion here.

That’s all for this post, I hope you learnt something new from this.