Using the jQuery library
I will be using the jQuery library in this tutorial, but use any JavaScript library you know and love. If you don't know any library, I strongly recommend picking jQuery because it is easy to learn and very light-weight. The latest release of jQuery on this day (September 26th, 2008) is 1.2.6. But go ahead and download the latest release, whatever it is at the time you read this.
You will need to upload the library to your Shopify theme Assets directory.
Once you've done this, you will be able to link to it from your theme.liquid template, by adding the Liquid Output {{ 'jquery-1.2.6.min.js' | asset_url | script_tag }} to the head element of your XHTML document, like so:
<head> ... {{ 'jquery-1.2.6.min.js' | asset_url | script_tag }} ... </head>
Your theme may already use another library like Prototype or Mootools. That's not a problem, as you can force jQuery to play nice with other JavaScript libraries. To make it play nice, all you need to do is add one line of JavaScript code in your theme.liquid template, and then use the jQuery namespace whenever you'll write jQuery code.
{{ 'jquery-1.2.6.min.js' | asset_url | script_tag }}
<script type="text/javascript">
jQuery.noConflict();
</script>This effectively gives the use of the alias $ back to JavaScript libraries that make use of it. For the full, technical explanation, head over here.
In addition to using the jQuery library, we will use one jQuery plugin to aid in the creation of our select boxes. Mind you, this can all be done 'by hand' but let's make our job as easy as possible. Go ahead and download the Select box manipulation plugin. Pick the packed version, its weight is only 2.9 KBytes. The documentation for the plugin is on this page.
To use this plugin, upload it to your Assets directory, and link to it in your theme.liquid template.
{{ 'jquery-1.2.6.min.js' | asset_url | script_tag }}
{{ 'jquery.selectboxes.pack.js' | asset_url | script_tag }}
<script type="text/javascript">
jQuery.noConflict();
</script>We are now ready to implement our JavaScript solution.