Get customers to choose an option

Caution

Vintage themes aren't available in the Theme Store. These themes don't have the features included in Shopify's Online Store 2.0 themes, and Shopify free Vintage themes don't receive updates beyond security fixes.

Note

If you use a free theme from Shopify, then you might be able to contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. To learn more, refer to Support for themes.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version
• Explore Online Store 2.0 theme customizations

When a customer visits a product page in your online store, the first available variant is selected by default. You can use this customization to disable the auto-selecting of the first available variant. That way, the customer will be prompted to manually select a variant before one is shown. )

Note

Because this customization prevents a variant from being selected by default, your theme may not show a product price until after the customer selects a variant. This is expected behaviour, because products with variants do not have a featured price. The price that is displayed is determined by the variant that is selected.

Sectioned and non-sectioned themes

Note

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme lets you drag and drop to arrange the layout of your home page, and a non-sectioned theme doesn't.

To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, click the Non-sectioned themes button and follow the instructions.

Sectioned themes

Select your theme

The steps for this customization vary depending on your theme. Click the button for your theme before following the instructions below:

Boundless

Steps for Boundless

Follow these steps to apply the customization to Boundless:

Edit your theme's JavaScript file

To edit your theme's JavaScript file:

Desktop

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

2. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

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

2. Find the code initVariantSelectors. Below that, find the following code:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

Add the following code on a new line below:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

It should look something like this:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Find the following line of code:

$(selectors.addToCartText).html(theme.strings.soldOut);

There are two instances of this line of code, both found within the productVariantCallback function. Replace only the second instance with:

$(selectors.addToCartText).html('Make a Selection');

> Note: > Some versions of Boundless do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.

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

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. Find the following code and delete it:

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

1. Find the code {% schema %}. Paste the following code on its own line above that:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

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

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

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

{% schema %}

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

Desktop

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

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

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

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

3. Replace the text Unavailable to Make a selection.

4. Click Save.

Debut

Steps for Debut

Follow these steps to apply the customization to Debut:

Edit your theme's JavaScript file

To edit your theme's JavaScript file:

Desktop

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

2. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

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

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

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

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

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

with:

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

If you can't find the above code, then find the following code:

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

Replace it with:

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

1. Find the code this.currentVariant = variant;

   Add the following code below:

this._updatePaymentButton(variant);

The result should look something like this:

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

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

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

with:

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

1. Just below, find the following code:

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

Replace it with:

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

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

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

with:

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

1. Find the code _initVariants: function() {. Replace the following code:

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

with:

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

> Note: > This code only needs to be replaced in Debut version 17.5.0 and above.

1. Find the following code:

_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
    })
  );
},

Add the following code, on a new line, below the above code:

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

It should look something like this:

_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) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

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

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

Replace it with:

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

1. Find the following code and delete it:

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

If you can't find the code above, then find this code and delete it:

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

1. Find the following code:

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

Replace it with:

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

If you can't find the code above, then find this code:

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

Replace it with:

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

> Note: > Some versions of Debut do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.

1. Find the following code:

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

Replace it with:

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

1. Find the following code:

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

Replace it with:

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

1. Find the code {% schema %}. Paste the following code on its own line above that:

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

It should look something like this:

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

1. Click Save.

Edit your product price snippet

To edit your product price snippet:

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

2. Find the following code:

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

Replace it with:

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

> Note: > Some versions of Debut do not include the code to be replaced in this step. If you can't find the code, then skip to the next step.

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.

Desktop

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

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

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

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

3. Replace the text Unavailable to Make a selection.

4. Click Save.

Minimal

Steps for Minimal

Follow these steps to apply the customization to Minimal:

Edit your theme's JavaScript file

To edit your theme's JavaScript file:

Desktop

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

2. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

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

2. Find the code initProductVariant: function() {. Below that, find the following code:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

Add the following code on a new line below:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

It should look something like this:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

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

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign variant = product.selected_variant %}

1. Find the following code and delete it:

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

1. Find all occurrences of this code:

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

Replace with:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. Find the code {% schema %}. Paste the following code on its own line above that:

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

It should look something like this:

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

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

Desktop

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

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

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

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

3. Replace the text Unavailable to Make a selection.

4. Click Save.

Narrative

Steps for Narrative

Follow these steps to apply the customization to Narrative:

Edit your theme's JavaScript file

To edit your theme's JavaScript file:

Desktop

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

2. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

1. In the Assets directory, click custom.js.

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

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

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

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

Replace it with:

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

1. Find the code {% schema %}. Paste the following code on its own line above that:

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

It should look something like this:

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

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

Desktop

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

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

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

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

3. Replace the text Unavailable to Make a selection.

4. Click Save.

Simple

Steps for Simple

Follow these steps to apply the customization to Simple:

Edit your theme's JavaScript file

To edit your theme's JavaScript file:

Desktop

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

2. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

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

2. Find the code initProductVariant: function() {. Below that, find the following code:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

Add the following code on a new line below:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

It should look something like this:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

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

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. Find the following code and delete it:

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

1. Find the code {% schema %}. Paste the following code on its own line above that:

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

It should look something like this:

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

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

Desktop

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

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

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

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

3. Replace the text Unavailable to Make a selection.

4. Click Save.

Supply

Steps for Supply

Follow these steps to apply the customization to Supply:

Edit your theme's JavaScript file

To edit your theme's JavaScript file:

Desktop

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

2. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

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

2. Find the code initProductVariant: function() {. Below that, find the following code:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

Add the following code on a new line below:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

It should look something like this:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

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

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign variant = product.selected_variant %}

1. Find the following code and delete it:

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

1. Find all occurrences of this code:

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

Replace it with:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. Find the code {% schema %}. Paste the following code on its own line above that:

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

It should look something like this:

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

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

Desktop

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

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

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

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

3. Replace the text Unavailable to Make a selection.

4. Click Save.

Venture

Steps for Venture

Follow these steps to apply the customization to Venture:

Edit your theme's JavaScript file

To edit your theme's JavaScript file:

Desktop

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

2. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

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

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

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Find the following code:

this.currentVariant = this._getVariantFromOptions();

Replace it with:

this.currentVariant = this._getVariantFromOptions() || {};

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

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

with:

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

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

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

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

1. Find the following code and delete it:

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

If you can't find the code above, then find this code and delete it:

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

1. Find all occurrences of this code:

{% unless current_variant.available %}

Replace it with:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}

1. Find the following code:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Replace it with:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% else %}
  {% unless current_variant.available or product.variants.size == 1 and variant.available %}
    {{ 'products.product.sold_out' | t }}
  {% else %}
    {{ 'products.product.add_to_cart' | t }}
  {% endunless %}
{% endif %}

1. Find the code {% schema %}. Paste the following code on its own line above that:

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

It should look something like this:

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

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

Desktop

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

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

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

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

3. Replace the text Unavailable to Make a selection.

4. Click Save.

Non-sectioned themes

Add prompts to your variant drop-down menus

To add prompts to your variant drop-down menus:

1. In the Snippets directory, click Add a new snippet.

2. Name your new snippet pick-an-option.

   

3. In your new snippet file, paste this code hosted on GitHub.

4. Click Save.

5. In the Layout directory, click theme.liquid.

6. Find the closing </body> tag near the bottom of the file. On a new line right above the closing </body> tag, paste the following code:

{% render 'pick-an-option' %}

1. Click Save.

2. Find the file that contains the add to cart form. It will have an action attribute set to /cart/add.

   It should be in one of these four files:

   • the product.liquid template under Templates
   • the theme.liquid layout under Layout
   • the product.liquid snippet under Snippets
   • the single-product.liquid snippet under Snippets

3. Find this code inside the form:

  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

or

  <option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Replace it with:

<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

1. Find and replace the following code:

   Minimal, Pop, or Supply

   If you use Minimal, Pop, or Supply, then find all occurrences of this code:

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

Replace with:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

### Other free Shopify themes

If you use any other Shopify theme, then find this code:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

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

Desktop

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

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

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

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

3. Replace the text Unavailable to Make a selection.

4. Click Save.