Link product options - Hide unavailable variants

This customization allows you to only display variant combinations that are available by linking the product options together. An example is to hide variant options that are not available like color or sizes:

Product example:

Choosing Teal as our color option, gives us a list of four sizes available:

Choosing Blue, gives us five sizes including x-large:

The product options are linked and will only show what's available (based on variant setup and inventory availability). 

Example of product setup:

How to:

Before beginning - Create a duplicate of your theme and keep as a backup. 

After making a duplicate, rename the backup theme to easily identify it as a backup before this customization. If you're working on a draft theme, you can use the Actions menu for that theme in your list. 

1

Create a new snippet file

Choose Edit Code from your theme's Actions menu:

From the Snippets folder, choose Add a new snippet:

Call the snippet file:

linked-options

Example:

Use the Create snippet button to complete. 

Next:

Copy all the code from this file:

Click to view code

Paste all the code into your new linked-options.liquid snippet file. Example:

Save the file:

2

Add code to product template

Tip: Refresh your Code Editor screen after creating new files. That allows the sidebar filter to work correctly. 

From the Templates folder, open product.liquid:

The default Pipeline code will look like this (one line of code):

Add a couple blank lines below the first line of code, then paste the following code after:

{% include 'linked-options' %}

Example:

Save the file:

That completes the required steps for this customization. Test your products that have more than one variant option to verify the linked-options code is working for your products. Check your product setup to analyze your variant option scenarios.