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

Shulebags
Tourist
6 0 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 <div> tag.

{% if product.available == true %}

and close the if below the last </div> 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/3673...

Any advice?

Replies 3 (3)

Elle
Shopify Staff
1092 97 208

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

Elle | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

ErSanjay
Shopify Partner
307 20 44

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 }}

<link rel="preload" href="{{ 'component-rte.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">

<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>

{%- 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 -%}

<div class="section-{{ section.id }}-padding">
  {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
    {{ 'component-facets.css' | asset_url | stylesheet_tag }}
    <script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
  
    <div class="page-width" id="main-collection-filters" data-id="{{ section.id }}">
      {% 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 %}
    </div>
  {%- endif -%}
  
  <div id="ProductGridContainer">
    {%- paginate collection.products by section.settings.products_per_page -%}
      {%- if collection.products.size == 0 -%}
        <div class="collection collection--empty page-width" id="product-grid" data-id="{{ section.id }}">
          <div class="loading-overlay gradient"></div>
          <div class="title-wrapper center">
            <h2 class="title title--primary">
              {{ 'sections.collection_template.empty' | t }}<br>
              {{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "underlined-link link" }}
            </h2>
          </div>
        </div>
      {%- else -%}
        <div class="collection page-width">
          <div class="loading-overlay gradient"></div>
  
          <ul id="product-grid" data-id="{{ section.id }}" class="
            grid grid--2-col product-grid
            {% if collection.products_count < 4 %} grid--{{ collection.products_count }}-col-tablet{% else %}
              {% if collection.products_count == 4 %} grid--4-col-desktop{% else %} grid--3-col-tablet grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}
            {% endif %}">
            {%- for product in collection.products -%}
            {% if product.available == true %}
              {% assign lazy_load = false %}
              {%- if forloop.index > 2 -%}
                {%- assign lazy_load = true -%}
              {%- endif -%}

              <li class="grid__item">
                {% 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
                %}
              </li>
              {%- endif -%}
            {%- endfor -%}
          </ul>
  
          {%- if paginate.pages > 1 -%}
            {% render 'pagination', paginate: paginate, anchor: '' %}
          {%- endif -%}
        </div>
      {%- endif -%}
    {%- endpaginate -%}
  </div>
</div>

{% 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 %}
Business Owner & Shopify Plus, Shopify app , Shopify Consultant - Full Stack Sofware Engineer
Warm regards,
Er Sanjay

If you find yourself in need of assistance with your store, don't hesitate to reach out! Feel free to send me a direct message, and I'll do my best to help you out.
Filipa-intro
Tourist
3 0 2

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!