How can I hide sold out items in my online store using code?

Store Design
1

Hey there,

I want to hide sold out products automatically in my shop. I’ve done some research found 2 ways i want the coding way to do this.

I found this solution but it didn’t work for me

Go to the product-grid-item.liquid under ‘Snippets’ in the theme editor.

Add the following code on top of the first

tag.

{% if product.available == true %}

and close the if below the last

tag. That is at the end of the file.

{% endif %}

https://community.shopify.com/c/Shopify-Design/Hide-Out-Of-Stock-Products-from-Collections/td-p/367301/highlight/false

Any advice?

2

Hi, @Shulebags

Elle here from Shopify.

I’ve moved your post from our Technical board over to our Design board where you should receive a better response.

Cheers,
Elle

3

hi @Shulebags i fixed this issue
i am using the dawn theme

ections/main-collection-product-grid.liquid

{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

  {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
    {{ 'component-facets.css' | asset_url | stylesheet_tag }}
    
  
    

      {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices %}
    

  {%- endif -%}
  
  
    {%- paginate collection.products by section.settings.products_per_page -%}
      {%- if collection.products.size == 0 -%}
        

          

          
            ## 
              {{ 'sections.collection_template.empty' | t }}

              {{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "underlined-link link" }}
            
          

        

      {%- else -%}
        
          

  
          
            {%- for product in collection.products -%}
            {% if product.available == true %}
              {% assign lazy_load = false %}
              {%- if forloop.index > 2 -%}
                {%- assign lazy_load = true -%}
              {%- endif -%}

              - {% render 'card-product',
                    card_product: product,
                    media_aspect_ratio: section.settings.image_ratio,
                    show_secondary_image: section.settings.show_secondary_image,
                    show_vendor: section.settings.show_vendor,
                    show_rating: section.settings.show_rating,
                    lazy_load: lazy_load
                  %}
              
              {%- endif -%}
            {%- endfor -%}
          

  
          {%- if paginate.pages > 1 -%}
            {% render 'pagination', paginate: paginate, anchor: '' %}
          {%- endif -%}
        

      {%- endif -%}
    {%- endpaginate -%}
  

{% schema %}
{
  "name": "t:sections.main-collection-product-grid.name",
  "class": "section",
  "settings": [
    {
      "type": "range",
      "id": "products_per_page",
      "min": 8,
      "max": 24,
      "step": 4,
      "default": 16,
      "label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-collection-product-grid.settings.header__3.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.main-collection-product-grid.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.show_rating.label",
      "info": "t:sections.main-collection-product-grid.settings.show_rating.info"
    },
    {
      "type": "header",
      "content": "t:sections.main-collection-product-grid.settings.header__1.content"
    },
    {
      "type": "checkbox",
      "id": "enable_filtering",
      "default": true,
      "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
      "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
    },
    {
      "type": "checkbox",
      "id": "enable_sorting",
      "default": true,
      "label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
    },
    {
      "type": "checkbox",
      "id": "collapse_on_larger_devices",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.collapse_on_larger_devices.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}
4

Hi, would this work for the broadcast theme? I would like to hide the sold-out products automatically.

www.intro-clothing.com

Thanks very much!