Use products with multiple options

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Note

For themes that don't have this feature already built in you can add the functionality for multiple options

Product Options Liquid Tutorial

Please review the new additional liquid parameters available for the Product and its variants.

All current default themes support products with multiple options by default. If you apply one of these themes as your new theme, no further action is needed to support multiple options.

This tutorial discusses how to update an existing theme to use Shopify's new multiple option JavaScript helper. This JavaScript helper will build multiple select dropdown boxes for a given product, so that users can easily select a product variant by selecting different values for each product option. A callback mechanism allows designers to provide a callback action to enable/disable their 'add to cart' button, update price field, etc.

While designers can create their own selector methods as they see fit, using the built-in JavaScript helper is an easy way to implement multiple select boxes as a way to select product variants.

Quick Overview of Steps

  1. Include new options JavaScript helper to theme.liquid
  2. Update product.liquid to use elements).
  3. Instantiate the JavaScript OptionSelectors model.
  4. Define a callback

    A callback is called whenever a user changes one of the new multiple <select> dropdown boxes. You can define a callback to perform whatever actions you need (for example, update the price, enable/disable the add to cart button if the particular option is not valid, etc.)

    The format of the callback is:

    var selectCallback = function(variant, selector) {
      <your code goes here>
    }
    

    Where:

    variant : object of the selected variant (if exists). It will have the following attributes:
      { id              : id of the product variant,
        title           : concatenation of option values with ' / '. ie: Large / Blue / Cotton
        price           : price in cents
        compare_at_price: compare_at_price in cents (or null)
        weight          : weight in grams (or null)
        available       : true / false
        option1         : value of option1
        option2         : value of option2 (or null if not used)
        option3         : value of option3 (or null if not used)
        sku             : sku (or null)
      }
    selector : object of the calling OptionSelector.
    

    This callback will be called when any of the new <select> elements is changed by a user. Your callback should handle the following cases:

    • When variant passed in is null (no valid variant with the selected options was found)
    • When variant passed in is not available (there is a variant with the selected options, but available = false, because that variant is sold out)
    • When variant passed in is available

    Here's a sample callback function for jQuery:

    var selectCallback = function(variant, selector) {
      if (variant) {
        if (variant.available) {
          // Selected a valid variant that is available.
          $('#add').removeClass('disabled').removeAttr('disabled').val('Add to Cart').fadeTo(200,1);
        } else {
          // Variant is sold out.
          $('#add').val('Sold Out').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);
        }
        // Whether the variant is in stock or not, we can update the price and compare at price.
        if ( variant.compare_at_price > variant.price ) {
          $('#price-field').html('<span class="product-price on-sale">'+ Shopify.formatMoney(variant.price, "") +'</span>'+'&nbsp;<s class="product-compare-price">'+Shopify.formatMoney(variant.compare_at_price, "")+ '</s>');
        } else {
          $('#price-field').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "") + '</span>' );
        }
      } else {
        // variant doesn't exist.
        $('#add').val('Unavailable').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);
      }
    }
    

    Instantiate Shopify.OptionSelectors JavaScript

    To use Shopify's JavaScript helper, you must instantiate Shopify.OptionSelectors with the id of the <select>, a JavaScript representation of the product, and a callback. This will hide the existing <select> element, build new <select> elements for each product option, and bind the callback to each selector.

    To instantiate Shopify.OptionSelectors JavaScript using jQuery:

    jQuery(function($) {
      new Shopify.OptionSelectors("product-select", { product: , onVariantSelected: selectCallback });
    });
    

    Format of JavaScript is:

    new Shopify.OptionSelectors(<domid of select>, { product: <product>, onVariantSelected: <callback>});
    

    Where:

    <domid of select> : id of the existing <select> element for the product. Must be a <select> tag.
    <product> : JavaScript object that represents the product. Shopify has liquid functionality to do this automatically. Pass in the following liquid tag .
    <callback> : the callback function that will be called whenever an option in the <select> element is selected.
    

    Here's a complete jQuery script that calls the Shopify JavaScript helper to enabled multiple options for a product:

    <script>
    // <![CDATA[
    var selectCallback = function(variant, selector) {
      if (variant) {
        if (variant.available) {
          // Selected a valid variant that is available.
          $('#add').removeClass('disabled').removeAttr('disabled').val('Add to Cart').fadeTo(200,1);
        } else {
          // Variant is sold out.
          $('#add').val('Sold Out').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);
        }
        // Whether the variant is in stock or not, we can update the price and compare at price.
        if ( variant.compare_at_price > variant.price ) {
          $('#price-field').html('<span class="product-price on-sale">'+ Shopify.formatMoney(variant.price, "") +'</span>'+'&nbsp;<s class="product-compare-price">'+Shopify.formatMoney(variant.compare_at_price, "")+ '</s>');
        } else {
          $('#price-field').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "") + '</span>' );
        }
      } else {
        // variant doesn't exist.
        $('#add').val('Unavailable').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);
      }
    }
    // initialize multi selector for product
    jQuery(function($) {
      new Shopify.OptionSelectors("product-select", { product: , onVariantSelected: selectCallback });
    });
    // ]]>
    </script>
    

    Want to discuss this page?

    Visit the Shopify Community