Steps for Debut

Follow these steps to apply the customization to Debut:

Edit your theme's JavaScript file

To show a featured image on a product page, you have to edit the code to your theme's JavaScript file:

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

3. In the Assets directory, click theme.js or theme.js.liquid.

4. Add the following code to the bottom of the file:

   Copy

   (function() {
     if( typeof(productOptions ) != "undefined" ){
       for(i=0; i < productOptions.length; i++) {
         var select = document.getElementById('SingleOptionSelector-' + i );
         select.filter = function () {
           return this.find('option').length > 1
         }
         var option = new Option('Pick a ' +productOptions [i][i], '');
         select.add(option, select.firstChild);
         select.selectedIndex = 0;
       }
     }
   })();

5. Find the code _updatePrice: function(variant). Replace the following code:

   Copy

   if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price) {
     return;
   }

   with:

   Copy

   /* if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price) {
     return;
   } */

6. Find the code this.currentVariant = variant;

   Add the following code below:

   Copy

   this._updatePaymentButton(variant);

   The result should look something like this:

   Copy

   this.currentVariant = variant;
   this._updatePaymentButton(variant);

7. Find the code _updateImages: function(variant). Replace the following code:

   Copy

   var currentVariantImage = this.currentVariant.featured_image || {};

   with:

   Copy

   if( this.currentVariant != undefined ) {
     var currentVariantImage = this.currentVariant.featured_image || {};
   }

8. Just below, find and replace the following code:

   Copy

   if (
     !variant.featured_image ||
     variantImage.src === currentVariantImage.src
   ) {
     return;
   }

   with:

   Copy

   /* if (
     !variant.featured_image ||
     variantImage.src === currentVariantImage.src
   ) {
     return;
   } */

9. Find the code _updateSKU: function(variant). Replace the following code:

   Copy

   if (variant.sku === this.currentVariant.sku) {
      return;
   }

   with:

   Copy

   if (this.currentVariant != undefined ) {
     if (variant.sku === this.currentVariant.sku) {
       return;
     }
   }

10. Find the code _updateSKU: function(variant). Replace the following code:

    Copy

    if (this.storeAvailability && this.variants.currentVariant.available) {
        this.storeAvailability.updateContent(this.variants.currentVariant.id);
    }

    with:

    Copy

    /*if (this.storeAvailability && this.variants.currentVariant.available) {
        this.storeAvailability.updateContent(this.variants.currentVariant.id);
    }*/

11. Just below the _updateSKU function, add the following code:

    Copy

    _updatePaymentButton: function(variant) {
        if (this.currentVariant != undefined) {
            document.querySelector('.payment-button').removeAttribute('class', 'visually-hidden');
        } else {
            document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
        }
    },

    The code should look something like this:

    Copy

    _updateSKU: function(variant) {
      if (this.currentVariant != undefined ) {
        if (variant.sku === this.currentVariant.sku) {
          return;
        }
      }
    
      this.container.dispatchEvent(
        new CustomEvent('variantSKUChange', {
          detail: {
            variant: variant
          },
          bubbles: true,
          cancelable: true
        })
      );
    },
    
    _updatePaymentButton: function(variant) {
      if (this.currentVariant != undefined) {
       document.querySelector('.payment-button').removeAttribute('class', 'visually-hidden');
      } else {
        document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
      }
    },

12. Click Save.

Edit your product page template

To edit your product page template:

1. In the Sections directory, click product-template.liquid.

2. Find the following code:

   Copy

   {%- assign current_variant = product.selected_or_first_available_variant -%}

   Replace it with:

   Copy

   {% if product.variants.size > 1 %}
     {% assign current_variant = product.selected_variant %}
   {% else %}
     {% assign current_variant = product.first_available_variant %}
   {% endif %}

3. Find the following code:

   Copy

   selected="selected"

   Delete the above code, along with the Liquid logic tags that surround it. The code to be deleted looks like this:

   Copy

   {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

   or this:

   Copy

   {%- if variant == current_variant %} selected="selected" {%- endif -%}

4. Find the following code:

   Copy

   {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

   Replace it with:

   Copy

   {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

   or find this code:

   Copy

   {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

   Replace it with:

   Copy

   {%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}

5. Find and replace the following code:

   Copy

   {% unless current_variant.available %}
     {{ 'products.product.sold_out' | t }}
   {% else %}
     {{ 'products.product.add_to_cart' | t }}
   {% endunless %}

   with:

   Copy

   {% if current_variant == null %}
     {{ 'products.product.unavailable' | t }}
   {% elsif current_variant.available %}
     {{ 'products.product.add_to_cart' | t }}
   {% else %}
     {{ 'products.product.sold_out' | t }}
   {% endif %}

6. Find and replace the following code:

   Copy

   {% if section.settings.enable_payment_button %}
       {{ form | payment_button }}
   {% endif %}

   with:

   Copy

   <div class="payment-button {% if current_variant == null %}visually-hidden {% endif %}">
       {% if section.settings.enable_payment_button %}
           {{ form | payment_button }}
       {% endif %}
   </div>

7. Paste the following code at the bottom of the file:

   Copy

   {% if current_variant == null %}
       <script>
       var productOptions = [];
           {% for option in product.options %}
               var optionObj = {};
               optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}";
               productOptions.push(optionObj);
           {% endfor %}
       </script>
   {% endif %}

8. Click Save.

Edit your product price snippet

To edit your product price snippet:

1. In the Snippets directory, click product-price.liquid.

2. Find and replace the following code:

   Copy

   {%- liquid
   if variant.title
     assign compare_at_price = variant.compare_at_price
     assign price = variant.price
     assign available = variant.available
   else
     assign compare_at_price = 1999
     assign price = 1999
     assign available = true
   endif
   
     assign money_price = price | money
   -%}

   with:

   Copy

   {%- liquid
     if variant.title
       assign compare_at_price = variant.compare_at_price
       assign price = variant.price
       assign available = variant.available
     elsif product.title 
       assign compare_at_price = product.compare_at_price
       assign price = product.price
       assign available = product.available
     else
       assign compare_at_price = 1999
       assign price = 1999
       assign available = true
     endif
   
     assign money_price = price | money
   -%}

Change the Add to cart button language settings

You can change the language settings for the Add to cart button so that products do not appear as "Unavailable" before a selection is made.

1. Find the theme that you want to edit, and then click Actions > Edit languages.

2. In the Filter translations box, start typing unavailable to show the "Unavailable" translation:

   

3. Change the text Unavailable to Make a selection:

   

4. Click Save.