This page was printed on Apr 18, 2019. For the current version, visit https://help.shopify.com/en/themes/customization/products/variants/use-products-with-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.
Quick Overview of Steps
Update product.liquid to use <select> tag and use unique ids
Define a callback
Include option_selection.js in theme.liquid
Each theme must include the following code in the header of their theme.liquid file.
Insert into the head section
Inside your product.liquid file, ensure you have a <form> element that posts to the /cart/add action, and that contains a <select> element that contains all the variants for your given product.
Use a <select> element as the selection method for your variants.
The <select> element requires a unique id. For example, <select id='product-12-selector' name='id'>.
There should be a DOM element for messages when selecting different variants. This is used for updating the price of the product, or setting a 'unavailable' or 'sold out' message.
The add to cart button should have a unique id. This is to allow the callback to enable/disable the button.
Define a callback (which is called whenever a user changes one of the newly created <select> elements).
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:
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: