How to hide unavailable product variants in Shopify? Linked options

Hi Shopifiers 🙂

Based on a merchant feature request, we have decided to add the (Linked options) feature on the next themes release from Plak Theme. Meanwhile, you can follow this tutorial to manually add this feature to your existing theme.

-------------------------------------------------------- Caution --------------------------------------------------------

This customization may not work with other themes than (Plak, Grass, Sly). Trying to enable this customization on an incompatible theme can cause errors in your Shopify admin when previewing your theme. Moreover, this is an advanced tutorial. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---------------------------------------------------------------------------------------------------------------------------------

What is linked options ?

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.

The video below is a great example, the sizes S and XL aren't available for the color 1896, so they are hidden in the next selection

How to add it to Plak, Grass or Sly theme ?

• From your Shopify dashboard, click Online store > 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
• Click Save
• Now open the file product-template.liquid
• Just before {% if collection %}, paste this code

{% render 'linked-options' %}

• Click Save