Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Make 'Pick an option' the default choice in product drop-down menus
{% 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 %}
@fishnyc22

This comment has been minimized.

Copy link

commented Mar 31, 2016

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

@engrmostafijur

This comment has been minimized.

Copy link

commented Sep 18, 2016

great helpfull...

@philipga

This comment has been minimized.

Copy link

commented Mar 30, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.