All Collections
For developers
Customization examples
Condtionally add option instructions
Condtionally add option instructions
Shevaughn avatar
Written by Shevaughn
Updated over a week ago

Please note this document is included as a courtesy to aide developers in customizations related to Product Customizer, so you should be familiar with HTML / liquid to implement changes listed below.

You may want to display instructions for a particular field โ€“ we most often see this with monogramming fields to add instructions for entering initials. We do plan to add option descriptions into the app very soon, but in the meantime, you could do this by matching the label based on what text it contains. For example, you can add this text below any option whose display name contains "Initials":

<script>
/* add a small description for monograms */
$( document ).ready( function() {
    $( '.product-customizer-options label:contains("Initials")' ).css( 'margin-bottom', '0' ).after( '<small><em>Initials will appear in the same order you type them. We recommend: F-L-M</em></small>' );
});
</script>
Did this answer your question?