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

pick-an-option.liquid

{% comment %}
  See https://docs.shopify.com/themes/customization/products/how-to-add-a-pick-an-option-to-drop-downs
{% endcomment %}

{% unless product.selected_variant %}
  {% if product.variants.size > 1 %}
    <script>
    var $addToCartForm = $('form[action="/cart/add"]');
    if (window.MutationObserver && $addToCartForm.length) {
      if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
        observer.disconnect();
      }
      var config = { childList: true, subtree: true };
      var observer = new MutationObserver(function() {      
        {% for option in product.options %}
          $('.single-option-selector:eq({{ forloop.index0 }})')
            .filter(function() { 
              return $(this).find('option').size() > 1  
            })
            .prepend('<option value="">Pick a ' + {{ product.options[forloop.index0] | json }} + '</option>')
            .val('')
            .trigger('change');
        {% endfor %}
        observer.disconnect();
      });  
      observer.observe($addToCartForm[0], config);
    } 
    </script>  
  {% endif %}
{% endunless %}

Hey caroline. Thanks for this very helpful snippet. I'm trying to combine it with your other snippet for "linked-options". Is there a way to prepend the label for the select box as the first/default option. But still have the linked options functionality work? Would be grateful for a tip to make this happen. Thanks

great helpfull...

Thank you But can we combine it with the remove sold out snippet?
they will work independently but not together

Hi Caroline, could you please help me fix this for Masonry theme. Have tried this but it doesn’t work. Thanks

hi when I use this code it's hiding my main image, how can I fix this