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

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

Copy link

engrmostafijur commented Sep 18, 2016

great helpfull...

Copy link

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

Copy link

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

Copy link

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