Hide variants that are sold out

Tip

The solution presented here does not work with Brooklyn, Debut, and sectioned themes.

If you want to prevent sold-out variants from being selected, or remove them from your product page, you can do that by editing your theme's HTML/CSS.

Caution

If your products have more than one product option, you will need to link their product options rather than use this customization.

To gray out the variants that are sold out

  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 disable-sold-out:

    support/create-disable-sold-out-snippet.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:

    
    {% include 'disable-sold-out' %}
    
    

    support/include-disable-sold-out-snippet.png

  9. Click Save.

To remove the variants that are sold out

  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 remove-sold-out:

    support/create-remove-sold-out-snippet.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:

    
    {% include 'remove-sold-out' %}
    
    

    support/include-remove-sold-out-snippet.png

  9. Click Save.

Want to discuss this page?

Visit the Shopify Community