My basic shopify site uses the simple theme (from around 2020).
This includes a sidebar on the left where you can click on collection names to browse types of product.
I can’t remember what I did to enable that sidebar in simple theme.
1. Hiding out of stock items in a collection, using Collection Conditions
Shopify Admin -> Products -> Collections -> Click a collection Name -> Collection Type -> Add another Condition -> Inventory Stock is greater than 0 -> Click Save (bottom)
This works but it sucks because:
There is no “default” collection
I have over 50 collections on my site, so this gets set in 50 places, hard to change back, bulk edit is NO help.
My Featured items is NOT a collection and I also want to change this there.
If someone adding an items forgets to add it to a collection, this is of no help.
Doesn’t address the product pages if customer saved link or searches by name.
2. “Use an app”… I don’t know of any free apps that do this “automatically” and trying to use flow todo this sucks. Feel free to correct me below if their is a good app to hide out of stock items easily, be sure to include what you have todo after installing the app!
3. Edit the liquid theme templates ourselves to hide out of stock items.
The following examples are for the simple theme, but the concepts can be used on any template.
Lets establish what we are changing, their are 3 urls:
mysite.com/collections/nameOfCollection (the collection grid page)
mysite.com/ (the featured page is a part of my homepage, manual content but it has it’s own version of the collection grid code on the simple theme, instead of including )
mysite.com/products/name-of-product-page (product page)
Next we find the template code in shopify admin ui:
Shopify Admin -> Online Store -> Themes -> ... (Current Theme) -> Edit Code
The files we care about are (in simple theme):
Sections → collection-template.liquid (the list of products page)
Sections → featured-products.liquid (the featured list of products page)
Sections → product-template.liquid (the product page)
Snippets → product-grid-item.liquid (the price on featured products list page is in here)
How did I find those pages? I guessed the names based on the names of the urls.
Then I used chrome’s inspector to inspect the grid item on the products page, searching a copy of a template for “grid__item” or whatever to trial and error my way through where to put the if statement.
Now as long as you have a working reference to product above in your template the variable that contains qty is called:
product.selected_or_first_available_variant.available
Here is a sample if statement to explain how they work:
{% if product.selected_or_first_available_variant.available %}
InStock
{% else %}
OutOfStock
{% endif %}">
so if
product.selected_or_first_available_variant.available
evaluates to true
InStock would be printed, otherwise OutOfStock will be printed, the else part is often optional.
Numbers <= 0 evaluate to false with “loosy goosy” typing in javascript/liquid templates, so we don’t even need a more specific condition like {% if product.selected_or_first_available_variant.available >= 1 %}
First make a backup copy of Sections → collection-template.liquid, by pasting the file into a text editor and saving it as collection-template.liquid.original or something, then make your edits on another file. Be sure to remember it goes in the Sections Folder!
Find the following line: {% include ‘product-grid-item’ %}
Replace it with:
{% if product.selected_or_first_available_variant.available %}
{% include 'product-grid-item' %}
{% endif %}
Now that Snippet will only be included when .available (the available qty) is >= 1, when .available evaluates to true.
Do the same thing in Sections → featured-products.liquid but don’t mix up the files when pasting in changes.
Now out of stock items are hidden on all collection pages and on featured items.
Next backup Sections → product-grid-item.liquid
This part is optional, but if a customer searches for a product (not using collections) and you want to hide the page when out of stock…
Find this line near top around line:16
replace with:
{% if product.selected_or_first_available_variant.available %}
Find the CORRECT corresponding closing
tag (around line 172 or 173) replace with:
{% if section.settings.product_description_position == 'below' %}
{%- assign position = 'below' -%}
{% include 'product-description' %}
{% endif %}
{% else %}PRODUCT NOT FOUND
{% endif %}
Paste in modified file to Sections → product-grid-item.liquid (double check name tab) → hit save
Now our individual products page is mostly blank when out of stock except for the name in the nav on top…
Backup and edit one more file Snippets → breadcrumb-nav.liquid
Add this to the first line before the <nav …> tag:
{% if product.selected_or_first_available_variant.available %}
Be sure to add:
{% endif %}
to last line of file after
Another option is to leave the product page up and hide the price for out of stock items, this may be better for SEO, so customers can find items which maybe you can reorder if they call and ask, but they don’t get burned by the outdated cheap price from 2 years ago, long since higher in this economy.
To hide price on product page backup and edit Sections → product-template.liquid:
{% if product.selected_or_first_available_variant.available %}
{% if product.compare_at_price_max > product.price %}
{{ 'products.product.sale_price' | t }}
{% else %}
{{ 'products.product.regular_price' | t }}
{% endif %}
{{ current_variant.price | money }}
{% if product.compare_at_price_max > product.price %}
{{ 'products.product.regular_price' | t }}
<s>
{{ current_variant.compare_at_price | money }}
</s>
{% endif %}
{% include 'product-unit-price', variant: current_variant, available: true %}
{% endif %}
Finally to hide price on collection list pages for out of stock items in Snippets → product-grid-item:
{% if product.selected_or_first_available_variant.available %}
{% if product.price_varies %}
{% assign price = product.price | money %}
{{ 'products.product.from_text_html' | t: price: price }}
{% else %}
{{ 'products.product.regular_price' | t }}
{{ product.price | money }}
{% endif %}
{% endif %}
I noticed other people trying to use {% if product.available == true %} as the condition for their theme or some using css shoved in like this (replace .product with correct selector for your theme on collections list page etc):
{% unless product.available %}
{% endunless %}
Sucks to have to do all that but still better then using collections or some funky app. If any one knows better modern ways, DO LET ME KNOW. Would be nice if all default themes on Spotify supported this with a checkbox someday. I get that they want to favor SEO and more changes of buying but having out of date prices for out of stock items will piss off your customers!