Create Fancy Dropdowns

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, JavaScript, CSS, and Liquid to implement changes listed below.

Getting Started

The below samples are built on the excellent Chosen library, so the first step is to include the library in your theme.

1

Download the latest version of Chosen from: https://github.com/harvesthq/chosen/releases, and unzip it.

2

Edit your current theme by logging into your Shopify admin and going to Online Store > Themes, click on the "..." and click "Edit HTML/CSS"

3

Click on the "Assets" folder and then click on "Add a new asset":

4

Click on "Choose File" and navigate to the downloaded/unzipped chosen library that you downloaded in step 1, and select the file named chosen.jquery.min.js

5

Click on "Upload Asset" to upload the file

6

Repeat steps 3-6, selecting the file named chosen.min.css this time.

7

Include the two uploaded assets from the above steps into the theme, pretty much anywhere after jQuery is included. Typically this might be in the layout/theme.liquid template within the <head> element and look like {{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' | script_tag }}. Add the following two lines somewhere after the jQuery line:

  {{ 'chosen.jquery.min.js' | asset_url | script_tag }}
  {{ 'chosen.min.css' | asset_url | stylesheet_tag }}
	

Example:

This sample is most useful for dropdowns that contain a large number of items which result in a long list for customers to scroll through. That long list is replaced by an attractive dropdown powered by a simple search.

This example assumes that you've followed all of the getting started steps above.

1
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 "Color" 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="color"] select'), function() {
    // make the element "chosen" (note: this is not yet fully compatible with required dropdowns)
    var $placeholder = $(this).find('option[value=""]');
    if ($placeholder.length > 0) {
      $(this).attr('data-placeholder', $placeholder.text());
      $placeholder.text('');
    }
    $(this).chosen();
  });
})();
	

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

4

And the final result!

This sample is great for when your product option is available in multiple colors and you want to provide a preview of what those color options look like.

This example assumes that you've followed all of the getting started steps above.

1
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 "Color" 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="color"] select'), function() {
    // make the element "chosen" (note: this is not yet fully compatible with required dropdowns)
    var $placeholder = $(this).find('option[value=""]');
    if ($placeholder.length > 0) {
      $(this).attr('data-placeholder', $placeholder.text());
      $placeholder.text('');
    }

    $(this).chosen({ width: '100%' }).on('chosen:showing_dropdown', function(e) {
      // display swatches in dropdown
      var $select = $(this);
      var $chosenElement = $(e.currentTarget.nextSibling);

      $.each($chosenElement.find('li'), function() {
        var colorName = $select.find('option').eq($(this).data('option-array-index')).val();
        // add a color swatch based on the option name
        $(this).prepend('<span style="display: inline-block; width: 15px; margin-right: 10px; background-color: ' + colorName + ';"> </span>');
      });
    }).on('change', function(e, params) {
      // set the swatch when an option is chosen
      var $chosenElement = $(e.currentTarget.nextSibling);
      var colorName = params.selected;
      $chosenElement.find('.chosen-single span').prepend('<span style="display: inline-block; width: 15px; height: 15px; margin-bottom: -3px; margin-right: 10px; background-color: ' + colorName + ';"> </span>');
    });
  });
})();
	

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

This sample simply adds a small swatch with a color based on the option name. You can use any logic you want here to show a particular color, or even an image.

4

And the final result!

The previous example showed how to create a simple HTML color swatch, but what if you want to support more exotic colors that don't have an HTML color name, or perhaps something like a font sample for embroidery? One solution is to use an image for the swatch, which is described in this approach.

This sample assumes that you've followed all of the getting started steps above.

1

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 "Color" with the values "Petal Pink", "Pink Cascade", "Pink".

2

For each of the available colors, create a small image containing just that color, and named like this: "petal-pink.png", "pink-cascade.png", "pink.png". So we took the color name and made it lowercase, with spaces replaced by dashes.

3

Upload each of those images to your Shopify Admin Settings > Files area. Note the URL from one of the images, it will look something like https://cdn.shopify.com/s/files/1/0359/9497/files/petal-pink.png?1232342234234. The part that you want to write down is everything from https:// up to files/, e.g. https://cdn.shopify.com/s/files/1/0359/9497/files/ in this case.

4

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

5

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

(function() {
  var uploadUrl = 'https://cdn.shopify.com/s/files/1/0359/9497/files/';

  $.each($('[data-option-name="color"] select'), function() {
    // make the element "chosen" (note: this is not yet fully compatible with required dropdowns)
    var $placeholder = $(this).find('option[value=""]');
    if ($placeholder.length > 0) {
      $(this).attr('data-placeholder', $placeholder.text());
      $placeholder.text('');
    }

    $(this).chosen({ width: '100%' }).on('chosen:showing_dropdown', function(e) {
      // display swatches in dropdown
      var $select = $(this);
      var $chosenElement = $(e.currentTarget.nextSibling);

      $.each($chosenElement.find('li'), function() {
        var colorName = $select.find('option').eq($(this).data('option-array-index')).val();
        var colorUrl = uploadUrl + colorName.toLowerCase().replace(/ /g, '-') + '.png';
        $(this).prepend('<span style="display: inline-block; width: 15px; margin-right: 10px; background-image: url(\'' + colorUrl + '\');"> </span>');
      });
    }).on('change', function(e, params) {
      // set the swatch when an option is chosen
      var $chosenElement = $(e.currentTarget.nextSibling);
      var colorName = params.selected;
      var colorUrl = uploadUrl + colorName.toLowerCase().replace(/ /g, '-') + '.png';

      $chosenElement.find('.chosen-single span').prepend('<span style="display: inline-block; width: 15px; height: 15px; margin-bottom: -3px; margin-right: 10px; background-image: url(\'' + colorUrl + '\');"> </span>');
    });
  });
})();
		

Where $('[data-option-name="color"] select') indicates the option(s) that you want to turn into a fancy dropdown. Here we're turning any option named "Color" into a fancy dropdown, but this could be changed to target any options you prefer. Make sure you replace the uploadUrl with the URL you noted in step 3.

This sample simply adds a small swatch with the associated color image used, left of the color name. You can customize the swatch (make it bigger, etc) by changing the CSS styling for the swatch <span> elements.

6

And the final result!

Still need help? Contact Us Contact Us