Hide Unavailable Combinations

• Hide unavailable options - Hide or restyle variant buttons/drop down options for variant combinations that do not exist.
• Out of stock items will not be affected, this enhancement only affects unavailable combinations.

Example

Enhanced Selector:

Live Demonstration

The following website is using the default Dawn theme, the password is "dynamic":

https://dynamic-selectors.myshopify.com/products/phone-case

Requirements

Tested on Dawn 8.0 theme.

Installation

1. Customize your theme.
2. Go to your product template page.
3. Create a "Custom liquid" block in the "Product information" tree (ensure this is under the variant picker block).
4. Paste the contents of the source.js file into your recently created "Custom liquid" block within javascript script tags. i.e.:

<script language="javascript" type="text/javascript">
  PASTE CONTENTS HERE
</script>

Say thanks!

I've spent countless hours working on this solution, I could have made it into a subscription based app, or kept it for myself. But I'd prefer to give back to the Shopify community.

But if would like to give a small donation, click the button below to say thanks!