Add Placeholder Text to Product Variant Selectors in a Bundle Widget

This customization will allow for placeholder text, such as "pick a size", in the product's variant selector in the bundle widget.  It also allows for validation so that if one of the widget's variant selectors hasn't had a selection made from it, then the bundle won't be added to the cart and error text will display.

To add this customization, follow these steps:

  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.


  3. Select Edit code.

    Edit code 

  4. Under "Layout", select theme.liquid.

    select theme.liquid 

  5. Add this code right above the </head> tag in the file:

    Note: Change #### to the text that you want to appear in the placeholder.  Replace !!!! with text that you want to show as part of the error message

    function bold_bundle_ready(){
    $('#shappify_bundle select').prepend('<option value="" disabled>####</option>');
    $( "#shappify_bundle select" ).each(function() {
    $('option:eq(0)', this).attr("selected", "selected");
    $('#shappify_bundle [type="submit"]').click(function() {
    if(jQuery('#shappify_bundle option[disabled]:selected').length){
    $('.bundle-total').prepend('<div class="bundle_warning">!!!!</div>'); return false; } }); } </script> <style> .bundle_warning { width: 800px; font-size: 20px; float: left; text-align: right; color: red; margin-top: 13px; } </style>

    paste this code above the closing head tag 

  6. Select Save.

    select save 

That's it!

Next Steps