Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Make 'Pick an option' the default choice in product drop-down menus
{% comment %}
{% endcomment %}
{% unless product.selected_variant %}
{% if product.variants.size > 1 %}
var $addToCartForm = $('form[action="/cart/add"]');
if (window.MutationObserver && $addToCartForm.length) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
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>')
{% endfor %}
observer.observe($addToCartForm[0], config);
{% endif %}
{% endunless %}
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

Copy link

great helpfull...

Copy link

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

Copy link

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

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