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

@fishnyc22 fishnyc22 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

@engrmostafijur engrmostafijur commented Sep 18, 2016

great helpfull...

@philipga

This comment has been minimized.

Copy link

@philipga philipga commented Mar 30, 2017

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

@Support-bling

This comment has been minimized.

Copy link

@Support-bling Support-bling commented May 30, 2020

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

@np2123585

This comment has been minimized.

Copy link

@np2123585 np2123585 commented Jul 2, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment