Make 'Pick an option' the default choice in product drop-down menus

how-to-add-a-pick-an-option-to-drop-downs.md

layout	title	sidebar_title	description	nav
default	Make 'Pick an option' the default choice in product drop-down menus	Make 'Pick an option' the default choice for drop-downs	Quick customization to your theme to let customers know there are variants.	group products

{% block "note-caution" %} This document has not been verified to work with sectioned themes. We are currently reviewing our documentation and will update them soon. You can try to implement this on your theme, but keep in mind that it may not function. {% endblock %}

If you'd like to prompt your customers to pick a variant for a product before adding it to their cart, you can customize your product pages to make that a required step. This customization can help customers choose the right product to suit their needs.

{{ '/support/pick-an-option-result.jpg' | image }}

How to add a variant prompt

{% include common-steps/default-product-option.md %}

[[ ////// START OF common-steps/default-product-option.md ////// ]]

{% block "note" %}

If you use the Brooklyn theme, skip to step 10. {% endblock %}

{% include admin_sidebar/online-themes-edit-html-css.html %}

1. Under Sections, locate the file product-template.liquid, and click it to open it in the code editor.

2. Replace the following code:

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

with

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

3. At the end of the file, paste the following code:

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

4. Click Save.

5. Open your theme.js file under Assets and add the following to the bottom of the file:

$(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');
    }
  }
});

6. 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 (press ctrl + F on a PC or command+ F on a Mac to search within a file):

   • the product-template.liquid template under Sections
   • 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

7. Locate this code inside the form:

   {% raw %}
   {% if option.selected_value == value %} selected="selected"{% endif %}
   {% endraw %}

8. Delete the code that matches the above snippet.

9. In the same file, locate all occurrences of this code:

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

10. Delete the text or_first_available_. Your code should look like this:

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

11. Click Save to confirm your changes to the code.

{% include admin_sidebar/online-themes-language.html %}

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

3. Change the text Unavailable to Make a selection: {{ '/support/pick-an-option-translate-unavailable.png' | image }}

4. Click Save to confirm your change to the translation.

   {% block "note-information" %} With this translation edit, as the product page loads your customers won't see the product as unavailable. {% endblock %}

[[ ////// END OF common-steps/default-product-option.md ////// ]]

Demo Store

Click here to view a demo of this customization.

Just going through this and noticed in Debut that

says

{% if option.selected_value == value %} selected="selected"{% endif %}

---

And this section gets assigned in a variable then used below.

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

I removed it from that line so it resulted in
{%- assign current_variant = product.selected_variant -%}
and it worked great.

---

Also, products with only the default show sold out.

That's great @shawnr42. I'll give it a test run over multi themes and try to get it to docs if it passes.

Ok, Fixed the last issue that if there's no variants, just the default

Find this code block

            <div class="product-form__item product-form__item--submit">
              <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
                <span id="AddToCartText-{{ section.id }}">
                  {% unless current_variant.available %}
                    {{ 'products.product.sold_out' | t }}
                  {% else %}
                    {{ 'products.product.add_to_cart' | t }}
                  {% endunless %}
                </span>
              </button>
            </div>

and add find all instances of {% if current_variant.available %} and we have to add this to the if statement or product.options.size == 1. Otherwise the button is disabled and shows sold out.