Last active
October 29, 2020 01:34
Make 'Pick an option' the default choice in product drop-down menus
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% 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 %} |
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
Hi Caroline, could you please help me fix this for Masonry theme. Have tried this but it doesn’t work. Thanks