Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Last active October 29, 2020 01:34
Show Gist options
  • Save carolineschnapp/bc54f3fabe2e9f4a770a to your computer and use it in GitHub Desktop.
Save carolineschnapp/bc54f3fabe2e9f4a770a to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link

great helpfull...

@philipga
Copy link

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

@Support-bling
Copy link

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

@np2123585
Copy link

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