How can I hide sold-out variants on the Impulse Theme?

[JaySol]

Hello everybody.

I know that there are a lot of topics that ask the same question but I can't figure out how to fix this problem.

I tried to adapt to this solution: https://shopify.dev/tutorials/customize-theme-hide-variants-that-are-sold-out
And now I can save in a variable "product_variants_removed" all the non-available variants of each product, but the second part (which should delete that variant) does not work. I tried in many ways to adapt the code to "Impulse".

Now, I'm changing the approach. I found a file called "variant-button.liquid" and I think that it can be edited to fix my problem.

Here's the code:

{%- assign swatch_file_extension = 'png' -%}

<div class="variant-wrapper variant-wrapper--{{ settings.variant_type }} js">
  <label class="variant__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}{% unless settings.variant_labels_enable %} hidden-label{% endunless %}"
    for="ProductSelect-{{ section_id }}-option-{{ forloop.index0 }}">
    {{ option.name }}
    {%- if is_color -%}
      <span class="variant__label-info">
        &mdash;
        <span
          id="VariantColorLabel-{{ section_id }}-{{ forloop.index0 }}"
          data-option-index="{{ color_option_index }}">
          {{ option.selected_value }}
        </span>
      </span>
    {%- endif -%}
  </label>
  {%- assign option_index = forloop.index -%}
  <fieldset class="variant-input-wrap"
    name="{{ option.name }}"
    data-index="option{{ option_index }}"
    id="ProductSelect-{{ section_id }}-option-{{ forloop.index0 }}">
    {%- for value in option.values -%}
      {%- assign product_available = true -%}
      {%- if product.options.size == 1 -%}
        {%- assign product_available = product.variants[forloop.index0].available -%}
      {%- endif -%}
      <div
        class="variant-input"
        data-index="option{{ option_index }}"
        data-value="{{ value | escape }}">
        <input type="radio"
          {% if option.selected_value == value %} checked="checked"{% endif %}
          value="{{ value | escape }}"
          data-index="option{{ option_index }}"
          name="{{ option.name }}"
          class="variant__input-{{ section_id }}{% unless product_available %} disabled{% endunless %}{% if is_color %} variant__input--color-swatch-{{ section_id }}{% endif %}"
          {% if is_color %} data-color-name="{{ value | escape }}"{% endif %}
          {% if is_color %} data-color-index="{{ color_option_index }}"{% endif %}
          id="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}">
        {%- if is_color -%}
          {%- assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' | split: '?' | first -%}
          {%- assign color_swatch_fallback = value | split: ' ' | last | handle -%}
          <label
            for="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}"
            class="variant__button-label color-swatch color-swatch--{{ value | handle }}{% unless product_available %} disabled{% endunless %}"
            style="background-image: url({{ color_image }}); background-color: {{ color_swatch_fallback }};"
          >
            {{ value | escape }}
          </label>
        {%- else -%}
          <label
            for="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}"
            class="variant__button-label{% unless product_available %} disabled{% endunless %}">{{ value | escape }}</label>
        {%- endif -%}
      </div>
    {%- endfor -%}
  </fieldset>
</div>

Any help would be appreciated!

[shiz]

Any luck with this @JaySol ? Have encountered the same issues and tried various snippets and solutions without a win. Tks. 

[rajsyful]

any update? got the same issue. 

[bheen786]

If you're still looking for a solution follow the instructions below. It "hides" the unavailable variants, but it doesn't completely erase them.

https://ecomexperts.io/blogs/liquid-tutorial-shopify/how-to-auto-hide-sold-out-items-from-your-shopi...

I used the code for "If you use a free theme from Shopify, other than Brooklyn or Narrative, then at the bottom of the file, paste the following code".