Link product options

Note

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:

Linked options unavailable

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.

Caution

This customization does not work with Shopify's Brooklyn, Jumpstart, and Solo themes, and it might not work with third-party themes. 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.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Under Snippets, click the link Add a new snippet.

  4. Name your new snippet linked-options.

    Linked options add snippet
  5. In your new snippet file, paste this code hosted on GitHub.

  6. Click Save.

  7. Under Layout, locate the file theme.liquid, and click it to open it in the code editor.

  8. Near the end of the file, right before the closing </body> tag, paste the following code:

    {% include 'linked-options' %}
    
    Linked options include snippet
  9. Click Save.

Want to discuss this page?

Visit the Shopify Community