Theme: Debut

Version(s) successfully tested on: 12.2.1

Recommended design time: 5 min

---

What you have

What you want

Background

Currently, when the "Show featured image until a variant is selected" Help Document is implemented, it changes the variant selector on the product page to say "Pick a [variant]". In English, if the variant type name starts with a vowel, this creates a grammatical error. It is incorrect to use an 'a' in front of a word starting with a vowel. One must use an "an".

Additionally, if the merchant's store is in another language, there is no way (other than modifying the code) to change "Pick a" to a phrase in their store's language.

As you can see in the image under the "What you have" heading, implementing the tutorial as it stands results in a grammatical error if the variant type starts with a vowel.

This modification to the Help Document is intended to allow merchant's to choose another variant selector phrase other than "Pick a" via a language setting.

How you get it

After following the Help Doc instructions.

Step 1: Replace the code you copied into the bottom of the theme.js file with the code below.

$(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="">' + pickVariantLanguage + ' ' + productOptions[i][i] + '</option>')
      .val('')
      .trigger('change');
    }
  }
});

Step 2: Replace the script you copied at the bottom of the product-template.liquid file with this.

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

Step 3: Add the following language setting underneath "unavailable" in the en.default.json file (or whatever language the merchant is using).

"select_variant": "Select your"

---

Now the merchant can change the "Pick a" phrase to something else (I would suggest "Pick your") in their theme's language settings.

Alternative keywords: variant, select, language, pick, featured image