Conditional display of text, based on SKU onVariant Change - lixonic/Shopify Wiki

Original URL:,-based-on-SKU-onVariant-Change

Here is how you can display a conditional text based on SKU of a product upon changing the variant dropdown. I'm using Debut v16.5.5 for the sake of simplicity. Later on, i will add fixes for other Shopify supported themes as i get time.

Debut (v16.5.5)

  1. Create a placeholder for the text inside product-template.liquid . I created one above the product form and added a liquid condition if the variant is selected or available as first on page load.

    <div class="sku-txt">
        {% if current_variant.sku == 'SKU1'%} <strong>Custom text for SKU 1</strong> {%endif%}
    {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
  2. Go to theme.js and locate _updateMasterSelect function. As it receives variant as an object, you can write a simple if condition with variant.sku

         * Update hidden master select of variant change
         * @param  {variant} variant - Currently selected variant
        _updateMasterSelect: function(variant) {
            if(variant.sku == 'SKU1'){
                $('.sku-txt').html('<strong>Custom text for SKU1 only</strong>')
            $(this.originalSelectorId, this.$container).val(;

3. Save it and done!