How to display product's SKU dynamically based on the user clicks on the products

5 0 3

Hello developer, i want to display dynamic product's SKU based on the user chooses the product? Here is the liquid code that i am trying to implement but it does not seem to work. It needs page to be reloaded in order to display product's SKU. I would appreciate more if there is any liquid code to display dynamic product's SKU based on the user chooses the product. Here is my Code:


{%- assign current_variant = product.selected_or_first_available_variant -%}
<span>{{ current_variant.sku }}</span>
<p class="stock out-of-stock mg__0 nt_outstock w__100 tc" id="nt_outstock" style="display:none">
{{ 'products.product.outofstock' | t }}
Below is the output but the displayed product's SKU is not dynamic. I have to reload the page to display the SKU. Please let me know what else i have to do to display the product's SKU dynamically. Your help would be much appreciated.
Screen Shot 2020-03-17 at 11.31.12 am.png


1 Like
Shopify Partner
7507 1037 2601

Hello, @Ryan_ 

Thanks for post
can you please check this article 


If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on regarding any help
Shopify Expert | Skype :
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
5 0 3

Thank you Ketan for your help but still i got no luck: 


1) I did this on mu theme.js file:


 var selectCallback = function(variant, selector) {
    if (variant) {
    }else {
          money_format: theme.moneyFormat,
          variant: variant,
          selector: selector,
          translations: {
            add_to_cart: theme.strings.addToCart,
            sold_out: theme.strings.soldOut,
            unavailable: theme.strings.unavailable

2) I did this on product.liquid file:

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
{%- include settings.swatch_design,class_input:'pr' -%}


1 Like
New Member
1 0 0

The solution is in the same article:

Just follow the steps for Brooklyn and Venture themes it should work.