Variants - Link product options

Highlighted
Community Manager
Community Manager
390 17 347

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:

 

link-01.jpg


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.

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. Under Snippets, click the link Add a new snippet.
  4. Name your new snippet linked-options.

    link-02.png

  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:

    {% render 'linked-options' %}

    link-03.png

  9. Click Save.

TyW | Community Manager @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

1 Like
Highlighted
New Member
1 0 0

I am very new to this but i followed the instructions exactly as posted and it is still offering options and showing them as unavailable.  I am using the venture theme if that matters.  Thank you in advance for your assistance.

0 Likes
Highlighted
New Member
2 0 1

Has anyone been able to find a workaround with this for Themes where it doesn't work? Im currently using the Warehouse theme from Maestroo and it does not work with square icons or drop down list. Please help lol

1 Like
Highlighted
New Member
1 0 0

Is there a solution for those of us that use Venture theme? Please help!

0 Likes
Tourist
10 0 0

@JayCDD wrote:

Has anyone been able to find a workaround with this for Themes where it doesn't work? Im currently using the Warehouse theme from Maestroo and it does not work with square icons or drop down list. Please help lol


Hi ,

 

I am also looking for answers. Using the same Warehouse theme  as @JayCDD . Hopefully , somebody can help.

0 Likes