Top

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 implement, open up the theme's "theme.liquid" file, find the closing head tag (will literally be /head), and add the following code right above the line that tag is on:

 

<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>

 

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.

Have more questions? Submit a request