Hidding out of stock product variants

Ask & Offer
1

Hello,

I’m using the Horizon theme on Shopify, and I was wondering if there’s a way of hiding out-of-stock variants with code?

1 Like
2

Yes, you can hide out-of-stock variants in the Horizon Shopify theme using a bit of Liquid and/or JavaScript.

Do you know how to set that

1 Like
3

Hi Stormly, I’ve been going around trying a few apps and bits of code with no success yet :frowning: Any suggestions?

4

Yes let’s me give you a guideline on it

5

Step 1: Identify how your variant options are rendered

The Horizon theme typically uses variant buttons or swatches (not just dropdowns), generated dynamically in:
sections/main-product.liquid or sometimes snippets/product-variant-picker.liquid.

Open one of those files, then look for a block like:

{% for option in product.options_with_values %}
{% for value in option.values %}
<button …>{{ value }}
{% endfor %}
{% endfor %}

Step 2: Hide out-of-stock variants with Liquid

Replace the inner loop with this logic:
{% for option in product.options_with_values %}

{% for value in option.values %} {% assign variant_for_value = product.variants | where: option.name | where: "title", value | first %} {% assign matching_variants = product.variants | where: option.name, value %} {% assign any_available = false %} {% for v in matching_variants %} {% if v.available %} {% assign any_available = true %} {% endif %} {% endfor %} 
  {% if any_available %}
    <button class="variant-button" data-value="{{ value }}">{{ value }}</button>
  {% endif %}
{% endfor %}
{% endfor %}

That logic ensures only variant values that have stock left are displayed.
If a certain “Size” or “Color” is totally sold out across all combinations, it’s hidden.

Step 3 (Optional): Hide via JavaScript

If the theme renders options dynamically with JavaScript (which Horizon sometimes does), you can patch it in your theme.js file like this:

document.addEventListener(‘DOMContentLoaded’, () => {
document.querySelectorAll(‘[data-variant-id]’).forEach(el => {
const available = el.getAttribute(‘data-available’);
if (available === ‘false’ || el.textContent.includes(‘Sold Out’)) {
el.style.display = ‘none’;
}
});
});

This hides variant buttons or options with a data-available="false" attribute or containing “Sold Out”.

Let me know if there’s anything to do

6

Hello @Joaninha ,

I hope you are well!

The out of stock products can be hidden using the code or you can add the button of Notify when products are back in stock. The customers will be notified whenever the product is back in stock. Also, I would like to inform you that Notify when back in stock button can be added using the app AiTrillion.

If you want to know more about the app, feel free to let me know.

7

Thank you for your help Stormly, but I haven’t managed to make it work yet. It was a little tricky to find the right place to paste the code you suggested :disappointed_face:

8

Are comfortable for me to set it up personally