Add 'Pick an Option' label to variant dropdown

[m00n22-zz]

I would like to add the 'Pick an Option'-label to a variation dropdown. Forcing customers to interact with dropdown before adding to cart. Already got some orders where people did not check and simple spammed the add to cart button.

Is there anyway of integrating this? Anyone tried it yet?

[Gabriel Monteagudo]

You can add a default option Pick an option to each variant MyOption in your Shopify Admin, and then only allow adding the product to the cart if another option is selected:

var shopifyClient = ShopifyBuy.buildClient({});
var shopifyBuyUI = ShopifyBuy.UI.init(shopifyClient);

shopifyBuyUI.createComponent("", {
  options: {
    product: {
      events: {
        beforeInit: function (product) {
          var actualOnButtonClick = product.onButtonClick;
          product.onButtonClick = function (event, target) {
            event.stopImmediatePropagation();

            if (this.selectedOptions.MyOption == "Pick an option") {
              alert("Please pick an option");
            } else {
              actualOnButtonClick.call(this, event, target);
            }
          };
        }
      }
    }
  }
});

You'll probably also want to report the error to the user in a nicer way, such as an inline text next to the combo and a border around it, instead of displaying an alert.