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. In the Assets directory, click theme.js or theme.js.liquid.

2. 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;
       }
     }
   })();

3. 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;
   } */

4. 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 || {};
   }

5. 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;
   } */

6. 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;
     }
   }

7. 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. If you use Debut, then find this 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. Paste the following code at the bottom of the file:

   Copy

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

7. 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.

Demo Store

Click here to view a demo of this customization.