Hide variants that is out of stock

Add the following in variant-main-picker.liquid

{%- for product_option_value in product_option.values -%}

 {% # hide variants = 0 # %}

{% if product_option_value.available == false %}

    {% continue %}

  {% endif %}

 {% # End hide variants = 0 # %}

              

              {% if product_option_value.size > longest_value and option_id_attribute %}

                {% assign longest_value = product_option_value.size %}

              {% endif %}

• Related Articles

• Hide mega menu links that contain 0 product

  Add the following in the mega-menu-list.liquid {% for childLink in link.links %} {% if link.type == 'collection_link' %} {% assign collection = link.object %} {% if collection.products_count > 0 %} {% assign break_after_modulo = forloop.index | ...

• Enable SKU in predictive search

  In predictive-search.js, add the following: const url = new URL(Theme.routes.predictive_search_url, location.origin); url.searchParams.set('q', searchTerm); url.searchParams.set('resources[limit_scope]', 'each'); ...

• Dynamic SKU on product page

  In edit code, add the following liquid in Block. {% doc %} @prompt Create a dynamic SKU display that automatically updates when product variants are changed without requiring a page refresh. The SKU should be visible on the product page and change ...

• Remove/hide Sold out Badge for out of stock Products

  In base.css file, add this code at the bottom: .grid__item .card-wrapper:has(.price--sold-out) .card--media .card__badge { display: none !important; }

• Change predictive search image to square

  In predictive-search-products-list.liquid, search for "image_aspect_ratio:" and change all to 1 / 1 ratio.