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.
Caution: This customization does not work with Shopify sectioned themes, nor with non-sectioned versions of Brooklyn and Venture. Trying to enable this customization on an incompatible theme can cause errors in your Shopify admin when previewing your theme. If you need this customization and use an incompatible theme, consider hiring an expert to implement it for you.
Update secondary menus in line with the current selection, to avoid showing unavailable combinations of options when a customer is choosing from multiple menus. In short, you don't want your customers to encounter this:
When your store's visitors make a selection in the first drop-down, you want the values in the second drop-down right below to be updated to list only those values that are available in combination with their first selection.
If a product has three options, you want the same to happen when one selects a value in the second drop-down. You want the values in the third drop-down to be updated to only list values that are available in combination with the two selections made above.
This works from top to bottom. Think of the typical "select a country then select a town" scenario. Selecting a country in the first country element updates the second town element to only contain towns found in that country.
Shopify does not give you linked options out of the box. It makes all choices in all drop-downs available. For example, all possible sizes will be listed in your Size drop-down and all colors will be listed in your Color drop-down, regardless what combinations exist or are in stock.
Linked options can be added to your theme in two steps.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- Under Snippets, click the link Add a new snippet.
- Name your new snippet
linked-options. - In your new snippet file, paste this code hosted on GitHub.
- Click Save.
- Under Layout, locate the file
theme.liquid, and click it to open it in the code editor. - Near the end of the file, right before the closing
</body>tag, paste the following code:
{% render 'linked-options' %} - Click Save.
