Get customers to choose an option

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

   $(document).ready(function() {
     if( typeof(productOptions ) != "undefined" ){
       for(i=0;i<productOptions.length;i++) {
         $('.single-option-selector:eq('+ i +')')
         .filter(function() {
           return $(this).find('option').length > 1
         })
         .prepend('<option value="">Pick a ' + productOptions[i][i] + '</option>')
         .val('')
         .trigger('change');
       }
     }
   });

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

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 -%}

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

6. Click Save.

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.