Hide sold-out variants
You can prevent customers from selecting sold-out variants by removing or disabling those variants on the product page.
Limitations
The customizations outlined on this page don't work for the following cases:
- Your products have more than one product option
- You use the Express theme and have the product page set to display products in an overlay
Sectioned and non-sectioned themes
Steps for Sectioned themes
Select your theme
The steps for this customization vary depending on your theme. Click the button for your theme before following the instructions below:
Steps for Non-sectioned themes
Hide sold-out variants
If you use a non-sectioned theme, then you can follow these steps to hide sold-out variants on the product page.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
- In the Snippets directory, click Add a new snippet.
- Name your new snippet
remove-sold-out
: - In your new snippet file, paste the following code:
{% if product.options.size == 1 %}
<script>
const addToCartForm = document.querySelector('form[action="/cart/add"]');
if (window.MutationObserver && addToCartForm !== null) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
{% for variant in product.variants %}
{% unless variant.available %}
variantOptions.forEach(function(element) {
if (element.value === {{ variant.title | json }}) {
element.remove();
}
});
{% endunless %}
{% endfor %}
observer.disconnect();
});
observer.observe(addToCartForm, config);
}
</script>
{% endif %}
- Click Save.
- In the Layout directory, click
theme.liquid
. - Near the end of the file, right before the closing
</body>
tag, paste the following code:
{% render 'remove-sold-out' %}
- Click Save.
Disable sold-out variants
If you use a non-sectioned theme, then you can follow these steps to disable sold-out variants. The variants are still displayed on the product page, but they can't be selected.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
- In the Snippets directory, click Add a new snippet.
- Name your new snippet
disable-sold-out
: - In your new snippet file, paste the following code:
{% if product.options.size == 1 %}
<script>
const addToCartForm = document.querySelector('form[action="/cart/add"]');
if (window.MutationObserver && addToCartForm !== null) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
{% for variant in product.variants %}
{% unless variant.available %}
variantOptions.forEach(function(element) {
if (element.value === {{ variant.title | json }}) {
element.setAttribute('disabled', '');
}
});
{% endunless %}
{% endfor %}
observer.disconnect();
});
observer.observe(addToCartForm, config);
}
</script>
{% endif %}
- Click Save.
- In the Layout directory, click
theme.liquid
. - Near the end of the file, right before the closing
</body>
tag, paste the following code:
{% render 'disable-sold-out' %}
- Click Save.