There’s nothing more frustrating for customers than finding an item they love online, and when they go to buy it, a “sold out” notification pops up. If you’re running a large store, and items move quickly, it doesn’t look good to have many products displayed in your store that are not actually available.
Hide Sold-Out Products Shopify
Did you know that with a little bit of code, you can make the sold-out variant disappear? That is, your customers won't see the “sold out” sign for items you don't have in stock. The item will simply not be there. In Shopify, hide sold-out variants with ease.
For example, if you're selling a sweater, and the customer needs a size large, but all the larges are gone, that size large variant will just not be there instead of saying “out of stock.”
This sold-out variants Shopify tutorial, courtesy of Ecomexperts will help you hide sold-out variants so your customers won't have that maddening experience of a “sold out” sign glaring them in the face.
In Shopify, how to hide sold-out items is easy. Follow these next easy steps to achieve your goal.
How to Hide Sold-Out Variants Shopify
This Shopify development tutorial for beginners will help you hide variants Shopify.
Step 1: Duplicate your current live theme
From your Shopify admin go to the Online Store and then click Themes. To be secure, we recommend you make a duplicate of your current live theme.
Click actions, and from the drop-down menu choose duplicate. Once the duplicate is made, click on Actions again, but this time choose Edit code.
Step 2: Sections directory
From the navigation menu to the left, scroll down to the Sections directory. Click on product-template.liquid, and a new file should appear on the right side of the code editor.
At the bottom of the file, paste the following code:
{% if product.options.size == 1 %}
<script>
var product_variants_removed = [
{%- for variant in product.variants -%}
{%- unless variant.available -%}
`{{ variant.title }}`,
{%- endunless -%}
{%- endfor -%}
];
</script>
{% endif %}
{% if product.options.color == 1 %}
<script>
var product_variants_removed = [
{%- for variant in product.variants -%}
{%- unless variant.available -%}
`{{ variant.title }}`,
{%- endunless -%}
{%- endfor -%}
];
</script>
{% endif
%}
Step 3: Assets directory
From the navigation menu to the left, scroll down to the Assets directory. Click on theme.js or custom.js, and a new file should appear on the right side of the code editor.
If you use a free theme from Shopify, other than Brooklyn or Narrative, then at the bottom of the file, paste the following code:
$( document ).ready(function() {
if( typeof product_variants_removed != undefined ) { // was there items to be removed?
var $addToCartForm = $('form[action="/cart/add"]');
if (window.MutationObserver && $addToCartForm.length) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
product_variants_removed.forEach(function(item){
$('.single-option-selector option').filter(function() { return $(this).text() === item; }).remove();
});
observer.disconnect();
});
observer.observe($addToCartForm[0], config);
$('.single-option-selector').trigger('change');
}
}
});
If you use Brooklyn, then at the bottom of the file paste the following code:
$( document ).ready(function() {
$('single-option-selector__radio').trigger('change');
if( typeof product_variants_removed != undefined ) { // was there items to be removed?
var $addToCartForm = $('form[action="/cart/add"]');
if (window.MutationObserver && $addToCartForm.length) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
product_variants_removed.forEach(function(item){
$('#ProductSelect-option-size-'+item).remove();
$('label[for=ProductSelect-option-size-'+item+']').remove();
});
observer.disconnect();
});
observer.observe($addToCartForm[0], config);
$('.single-option-selector__radio').trigger('change');
}
}
});
If you use Narrative, then at the bottom of the custom.js file paste the following code:
$( document ).ready(function() {
if( typeof product_variants_removed != undefined ) { // was there items to be removed?
var $addToCartForm = $('form[action="/cart/add"]');
if (window.MutationObserver && $addToCartForm.length) {
var config = { childList: true, subtree: true };
product_variants_removed.forEach(function(item){
$('.single-option-selector option').filter(function() { return $(this).text() === item; }).remove();
});
}
}
});
Click Save.
Step 4: Check if everything is working properly
Go to your store and give yourself a big pat on the back.
Auto Hide Sold Out Variants, No App
Now you should have auto-hide on your sold-out variants and you can keep your customers happy while making your store look fuller. The best part is that you now know how to auto-hide sold-out variants free; no need to spend your money on an app.