Create a Multiselect Option

A future update to Product Customizer will include support for multiple select dropdowns, but for now the same functionality can be achieved by either using a checkbox group, or by performing the following customization to create a true <select multiple> element

1

First create your dropdown product option and add it to one or more products. For this example we're going to assume that the option is named "Colors" with the values "black", "red", "green", "blue".

2

Edit your current theme, and open up the snippets/shopstorm-apps.js.liquid file for editing.

3

Somewhere after the line that reads {% comment %} Place any and all ShopStorm Apps custom JavaScript below this comment {% endcomment %}, add the following lines:

(function() {
  $.each($('[data-option-name="colors"] select'), function() {
    // make the dropdown into a multiple choice:
    $(this).attr('multiple', true);
    
    // fix the placeholder option (which will now be selected and not force a different option to be chosen for a required select)
    var $placeholder = $(this).find('option[value=""]');
    if ($placeholder.length > 0) {
      $placeholder.attr('disabled', true);
    }
    if ($(this).find('option').first().is(':selected')) {
      $(this).find('option').first().attr('selected', false);
    }
  });
})();
	

Where $('[data-option-name="colors"] select') indicates the option(s) that you want to turn into multiple selects. Here we're turning any option named "Colors" into a multiple select, but this could be changed to target any options you prefer.

4

And the final result!