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.
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.
Steps:
- 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.
Deactivate sold-out variants
If you use a non-sectioned theme, then you can follow these steps to deactivate sold-out variants. The variants are still displayed on the product page, but they can't be selected.
Steps:
- 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.