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.

    select actions 

  3. Select Edit HTML / CSS.

    select edit html / css 

  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!

Have more questions? Submit a request