Overview:
We have been requested quite a few times to display the selected image picker item name next to the related field's title. The code below will display the "Name" that is entered for that image in our app next to the Title for that field. This will apply to all image pickers within our app.
Please see the GIF below for a visual representation:
Solution:
Paste the following code just before the closing </head> tag in your theme.liquid file.
{{ 'https://productoptions.w3apps.co/js/options.js' | script_tag }} <script type="text/javascript"> setTimeout(function() { w3productOptionsJS($); }, 0); function fieldAddedCallback(field, element) { if(field.type == "imagepicker"){ var input = $(element).find('input'); $(element).find('.product-options-field-name').append(': <b id="value"> </b>);
$(element.find('img')).on('click touchend', function(){
$(input).trigger('change');
}); $(input).on('change', function(){ var selVal = $(this).val(); $(element).find('#value').text(selVal); }); } } </script>