Add Placeholder Text to Product Variant Selectors in a Bundle Widget

Follow

This customization will allow for placeholder text, such as "pick a size", to display in the product's variant selector within the bundle widget. This 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's admin, select Online Store.

    select online store

  2. Select Actions.

    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

    <script>
    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_warning').remove();
    $('.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:

Blog Posts:

1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.