Display SKU on Product Page - Narrative Theme

cpmusic_nicole
Tourist
6 1 2

I'm struggling to find the solution to this for the Narrative theme.

I want to show the variant SKU on the product page, but my issue is that the SKU doesn't change when you select another variant. It only shows the SKU of the first loaded variant.

I tried to follow this tutorial by Shopify, but I can't find the line of code that needs editing for the Javascript portion.

 

Replies 4 (4)

ZestardTech
Shopify Expert
5393 970 1291

Hello There, 

 

Kindly add the following code to the product-template.liquid section, just below the product title.

{%- assign current_variant = product.selected_or_first_available_variant -%}
<span>{{ current_variant.sku }}</span>

https://shopify.dev/tutorials/customize-theme-show-sku-numbers#show-sku-numbers-on-product-pages-sec...

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
cpmusic_nicole
Tourist
6 1 2

Hi Pallavi,

I already tried that. I mentioned that I followed the tutorial that you linked in my original post.

Although it shows the SKU, it doesn't change depending on the variant selected.

Thanks though.

AmazelDesigns
Excursionist
14 0 16

Pallavi, Can you please answer the question. Thanks.

Svein
Visitor
1 0 1

I figured it out!

Going to explained here in quite a detail cos PS! I myelf dont know anyting about coding- I still think CSS is the space station..

But I made it work.. some intuitive thinking il guess.. here we go:

 

First do exactly as this guy in the link does:

https://shopify.dev/tutorials/customize-theme-show-sku-numbers#show-sku-numbers-on-product-pages-sec...

 

To be  more explenation: - point 1 to 6 should give you the following code in the template called "product-template.liquid" (somewhere around line 50..).

 

Product Form & Description
------------------------------------------------------------------------------
{%- assign current_variant = product.selected_or_first_available_variant -%}
<span>{{ current_variant.sku }}</span>


{% endcomment %}
<div class="product__content page-width">
<div class="grid">
<div class="grid__item medium-up--push-one-twelfth medium-up--ten-twelfths">
<div class="product__content-header">

{% if section.settings.show_vendor %}
<span class="product__vendor text-small text-center" itemprop="brand">{{ product.vendor }}</span>
{% endif %}

<h1 class="product__title h2 text-center" itemprop="name">{{ product.title }}</h1>
{% assign current_variant = product.selected_or_first_available_variant %}


<span class="variant-sku">{{ current_variant.sku }}</span>

 

 

 

OK- SECOND.. the guy from this link:

https://tutes.in/how-to-show-stock-quantity-for-all-variants-in-shopify/

also have a say..and want you to put in his code too.. his code will go in the same "product-template.liquid".  And also in the same section 

Product Form & Description

But actually a bit lower or more lined below then the first code you put in.  In fact - where you actuallly put these codes will also affect where exactly you will see this on the screen. 

So this is the code : 

<div id="stockstatus">
        {% if product.variants.size < 2 %}
          {% assign current_variant= product.variants.first %}
        {% endif %}
        {% if current_variant.inventory_quantity < 1 %}
            <p class="zero">Sold Out!<span class="variant-inventory">{{ current_variant.inventory_quantity }}</span></p>
        {% elsif current_variant.inventory_quantity < 6 %}
            <p class="few">Hurry! Only <span class="variant-inventory">{{ current_variant.inventory_quantity }}</span> left in stock.</p>
        {% else %}
            <p class="plenty"><span class="variant-inventory">{{ current_variant.inventory_quantity }}</span> available in stock.</p>
        {% endif %}
 </div>
<script>
     var inv_qty = {};
     {% for var in product.variants %}
           inv_qty[{{- var.id -}}] = {{ var.inventory_quantity | default: 0 }};
     {% endfor %}
</script>

 

 

 

ANd the TOTAL script in the section called 

Product Form & Description will then be:

------------------------------------------------------------------------------
Product Form & Description
------------------------------------------------------------------------------
{%- assign current_variant = product.selected_or_first_available_variant -%}
<span>{{ current_variant.sku }}</span>
{% endcomment %}
<div class="product__content page-width">
<div class="grid">
<div class="grid__item medium-up--push-one-twelfth medium-up--ten-twelfths">
<div class="product__content-header">

{% if section.settings.show_vendor %}
<span class="product__vendor text-small text-center" itemprop="brand">{{ product.vendor }}</span>
{% endif %}

<h1 class="product__title h2 text-center" itemprop="name">{{ product.title }}</h1>
{% assign current_variant = product.selected_or_first_available_variant %}


<span class="variant-sku">{{ current_variant.sku }}</span>

<p class="product__price text-center{% if current_variant_sale %} product__price--sale{% endif %}" data-product-price aria-live="polite">

<span class="product__sale-price-label visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="product__regular-price-label visually-hidden">{{ 'products.product.price' | t }}</span>
<span class="product__current-price" data-regular-price>{{ current_variant.price | money }}</span>

<span class="product__compare-price-label visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product__compare-price" data-compare-price>{{ current_variant.compare_at_price | money }}</s>

{% include 'product-unit-price', variant: current_variant %}
</p>

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte">
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}

</div>

<div id="stockstatus">
{% if product.variants.size < 2 %}
{% assign current_variant= product.variants.first %}
{% endif %}
{% if current_variant.inventory_quantity < 1 %}
<p class="zero">Sold Out!<span class="variant-inventory">{{ current_variant.inventory_quantity }}</span></p>
{% elsif current_variant.inventory_quantity < 6 %}
<p class="few">Hurry! Only <span class="variant-inventory">{{ current_variant.inventory_quantity }}</span> left in stock.</p>
{% else %}
<p class="plenty"><span class="variant-inventory">{{ current_variant.inventory_quantity }}</span> available in stock.</p>
{% endif %}
</div>
<script>
var inv_qty = {};
{% for var in product.variants %}
inv_qty[{{- var.id -}}] = {{ var.inventory_quantity | default: 0 }};
{% endfor %}
</script>

<div class="product__content-main">
<div class="product__description rte" itemprop="description" class="rte">
{{ product.description }}
</div>

<div class="product__form-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product__form-wrapper">
<meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
<meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
<link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">

{% include 'product-form' %}

{% if section.settings.show_share_buttons %}
{% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
<div class="product__share-wrapper small--hide">
<div class="product__share">
{% include 'social-sharing', type: "product", links: 'bottom' share_title: product.title, share_permalink: product.url, share_image: featured_media %}
</div>
</div>
{% endif %}
{% endif %}
</div>
</div>

</div>
</div>
</div>
</div>

{% comment %}

 

 

 

NOW once that folder is  done.. we will have to do this:

Go to "Custom.js"  

and let this be the following codes: (just erase all and insert this) at line1. 

/*-----------------------------------------------------------------------------/
/ Custom Theme JS
/-----------------------------------------------------------------------------*/

// Insert any custom theme js here...
document.addEventListener('DOMContentLoaded', () => {
const productJson = [...document.querySelectorAll('[data-product-json]')];
if (productJson.length > 0) {
productJson.forEach((product) => {
const sectionId = "shopify-section-" + product.closest('[data-section-id]').dataset.sectionId;
const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
const productInfo = JSON.parse(product.innerHTML);
const inputValues = [];
const optionValues = [];
let count = 0;
inputSelects.forEach((input) => {
inputValues.push(input.value);
optionValues.push(count);
input.addEventListener('change', (evt) => {
const currentValue = evt.currentTarget.value.toString();
const changedIndex = inputSelects.indexOf(evt.target);
inputValues[changedIndex] = currentValue;
variantSKU.innerText = ' ';
productInfo.variants.forEach((variant) => {
if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
variantSKU.innerText = variant.sku;

if(inv_qty[ variant.id ] <1 || inv_qty[ variant.id ]==undefined)$("#stockstatus").html("<p class=zero>Sold Out!</span></p>");
else if(inv_qty[ variant.id ] <6)$("#stockstatus").html("<p class=few>Hurry! Only <span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> left in stock.</p>");
else $("#stockstatus").html("<p class=plenty><span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> available in stock.</p>");

}
});
});
count += 1;
});
});
}
});

 

 

now it this code is basically codes from both previous links but merged into one.  What i merged in i placed in red text. 

 

 

NOTE that is have NOT done anything with CSS .. like one of them mention in his link.. but this set up it still works.

If none of this made any sense,,, i perfectly do understand,,, and i will delete this post if many ppl say it dont work. (Im am NOT into coding at all.. just tweaked on it) 

🙂