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

You can prompt your customers to pick a variant for a product before adding it to their cart by customizing your product pages to make that a required step. This customization can help customers choose the right product to suit their needs.

Pick an option result

How to add a variant prompt

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. In the Assets directory, open your theme.js file (or theme.js.liquid) 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').size() > 1  
          })
          .prepend('<option value="">Pick a ' + productOptions[i][i] + '</option>')
          .val('')
          .trigger('change');
        }
      }
     });
    
  4. 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;
      } */
    
  5. In the Sections directory, open the product-template.liquid file.

    Note

    If you are using a non-sectioned theme, in the Templates folder open the product.liquid file.

  6. Replace the following code:

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

    with

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

  7. At the bottom 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>
    
    
  8. Click Save.

  9. 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 current product-template.liquid file in the Sections directory
    • the product.liquid template in the Templates directory
    • the theme.liquid layout in the Layout directory
    • the product.liquid snippet in the Snippets directory
    • the single-product.liquid snippet in the Snippets directory
  10. Find and delete this code inside the form:

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

    or

    
    {% if option.selected_value == value %} selected="selected"{% endif %}
    
    
  11. In the same file, find all occurrences of this code:

    
    {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
    
    
  12. Delete the text or_first_available_. Your code should look like this:

    
    {% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
    
    
  13. Click Save to confirm your changes to the code.

  14. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  15. Click the ... button for the theme you want to customize, then click Edit language.

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

  17. Change the text Unavailable to Make a selection:

    Pick an option translate unavailable

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

Tip

With this translation edit, as the product page loads your customers won't see the product as unavailable.

Demo Store

Click here to view a demo of this customization.

Want to discuss this page?

Visit the Shopify Community