Filter Showing Out of Stock Sizes - Dawn Theme

[Ashley_Jemmeson]

Hello!

I've seen a few posts on this issue, but a solution seems outstanding... 

I have utilised filters for my online store originalweekend.com.au through the Search & Discovery App, as well as successfully creating metafields. 

However... the SIZE filter, through Search & Discovery, shows all product that ever had that size available when filtered on the store. For example I have a t-shirt in 5 sizes, only size M, L, XL is available, S is sold out but when filtering according to size S that t-shirt will still come up as an option in the collection page, for the customer to then find it is not available on the product page.

This is obviously terrible UX, the filtering system is obviously flawed. 

How can I set this up to only show sizes in stock when filtering by size?

If I can't edit the Search & Discovery Size, do I then need to create a metafield and track this manually when product becomes available or not?

Looking forward to seeing if anyone has any solutions! 

Cheers!

[kgbfashionista]

Hi,

Some time ago had the same issue.

My solution was to use Shopify Flow to assign & delete tags when inventory changes, so they simply won`t show in filters. Say, there is size S, M and L, but only M is available, so Flow will delete S and L tags until they are restocked. Therefore, when people would filter by size L they won`t see this product, but it will appear if filtered by M.

Now, since we moved from using tags to metafields, I implemented similar way of filtering - assign metafields via Flow (for variant options, such as sizes etc.), but they are not deleted when inventory quantity for that variant drops below 1, because Shopify Search & Filters allows to add an additional filter option called Availability - In stock / Out of Stock.

That`s an extra strep for customers, which is not very pleasing, so we are thinking of using same structure as with tags - add metafields when in stock & delete when out of stock.

Hope this helps.

[DariusWS]

Sound great, BUT can't "Use as filter in admin" in product.variants.metafields...

[kgbfashionista]

Hi,

Sure, product variant metafields can`t be used to filter products in admin, but you can use Shopify Flow to add / remove tags alongside with metafields to be able to filter them in admin, if you need that.

[DariusWS]

@Shopify It is REALLY important to filter size option which is in STOCK

[Malessi]

Hey are you able to share the flow with updating the metafields? I'm having trouble figuring this out

[kgbfashionista]

Hi, sure.

Previously I had a really long one with separate "roads" for every case, but now that I`ve pick up on Liquid, I made it look much neater.

This is how it looks now:

And so the point was to choose a trigger when Inventory Quantity Changed, then check if the qty now is 0 or less. if yes, then remove metafield value, and if not, then Update Variant Metafield, and in the value I`ve put this code:

{%- for selectedOptions_item in productVariant.selectedOptions -%}
{%- assign kids_size = selectedOptions_item.value | remove: 'M' | remove: 'Y' -%}
{%- capture sizeMetafield -%}
{%- if selectedOptions_item.value contains "M" -%}
["{{kids_size}} Months"]
{%- elsif selectedOptions_item.value contains "Y" -%}
 ["{{kids_size}} Years"]
{%- endif -%}
{%- endcapture -%}
{{- sizeMetafield -}}
{%- endfor -%}

This is example for Kids Clothes Sizing I use - it takes value from variant option (it`s always in the format of 3Y or 9M (years and months)), so this code strips the letters off, takes the number and adds a proper word for Years or Months to be used in metafield (and in filter).

If you need something simplier, then this here is an example on how I did size for bedding:

{%- for selectedOptions_item in productVariant.selectedOptions -%}
{% assign currentSize = selectedOptions_item.value %}
["{{- currentSize -}}"]
{%- endfor -%}

Basically, it just takes whatever the option value is and assigns it as a metafield value.

Oh, and since I had a list of single line strings as a metafield, I had to use [" "] - since it`s basically an array, it had to be formatted as an array.

I noticed, that after items goes out of stock and then gets restocked back, there was an issue with updating the metafields, so in the flow I made a change that solved the issue - before updating the metafield, it removes whatever there was left and updates on a clean slate, so to say.

Still, I know it could be done even better in one whole chunk of code.

Let me know if you have any questions. Hope this helps.

[minhcu]

You can add a class for soldout products and hide them. But if you want to hide them only when the filter is active, you can add a class to the body to know when the filter is active.
Or to be more convenient, just use some 3rd party app, you can try this one https://apps.shopify.com/ultimate-search-and-filter-1

[Ujjaval]

@minhcu Have you made any changes to this setting in search and discovery app: 

try to select at the end out of the stock radio button otherwise contact to the app support.

[minhcu]

Okay let me check on it.

[Fildec]

Hi there!

I'm facing the same issue. I tried contacting support, but they don't have any solution to it.

Have you found any solution to not show these sold-out variants?

[DariusWS]

I have solution. Create product metafield with type "Single line text" and option as "List of values". 

And created shopify flow like this:

and add this snippet:

[
{% for variants_item in product.variants %} 
  {% if variants_item.availableForSale %}
    {% for selectedOptions_item in variants_item.selectedOptions %} 
      {% if selectedOptions_item.name == "Size" or selectedOptions_item.name == "size"%}
      "{{selectedOptions_item.value}}"
      {% endif %}
    {% endfor %}
  {% endif %}
  {% unless forloop.last %}
    ,
  {% endunless %}
{% endfor %}
]

[asm123]

Hi! Where did you add this code snippet?

[DariusWS]

in the flow

[AdGirl]

Hey, can you please let me know what you put in Metafield Namespace and Key? I assume the snippet goes to Value, right? 
Thanks 🙂

[DariusWS]

It doesn't work if you have multiple options. Like color and size. Changed my logic to use default shopify filter "in stock" and every time customer use filter automatically preselects it.

[AdGirl]

Can you talk to me like I am a 5 year old and guide me what to do? 😄 

[dalemmmm]

Hi, I just met this issue yesterday...

I have a quick trick/workaround: Apply the Availability filter to the url by default, using Shopify's string filters. For example: if the childlink.type == 'collection_link', then href="{{ childlink.url | append: '?filter.v.availability=1' }}". Same thing for the 'Remove all filters' link. Unless the customer chooses to see out-of-stock products by modifying the Availability filter.

[TopCrown]

Where did you add this line of code? 

[johanson]

Easiest way i have found is to 

1.) enable Availability filter in admin (this is required for #2)

2.) Find your facets.js file and modify the following bit...

createSearchParams(form) {
  const formData = new FormData(form);
  return new URLSearchParams(formData).toString();
}

to be 

createSearchParams(form) {
  const formData = new FormData(form);

  let newSearchParams = new URLSearchParams(formData).toString();
  if (newSearchParams.includes("filter.v.option") && !newSearchParams.includes("filter.v.availability")) {
    newSearchParams = newSearchParams + "&filter.v.availability=1";    }
    return newSearchParams;
}

[samu96]

Hi, I'm having the same problem with my store. I wanted to try to solve with your script, but what do you mean with the facets.js file? I've searched but can't find it.

[Bahia_Designs]

A version of this code worked for me. You may need to look in the assets/theme.js file for the facets.js code. In the Focal theme, for instance, it looks something like this:

const formData = new FormData(this.querySelector("#facet-filters-form"));

const searchParamsAsString = new URLSearchParams(formData).toString();

triggerEvent(this, "facet:criteria-changed", { url: `${window.location.pathname}?${searchParamsAsString}` });

and I changed it to this:

const formData = new FormData(this.querySelector("#facet-filters-form"));

let newSearchParams = new URLSearchParams(formData).toString();
if (newSearchParams.includes("filter.v.option") && !newSearchParams.includes("filter.v.availability")) {
newSearchParams = newSearchParams + "&filter.v.availability=1"; }
triggerEvent(this, "facet:criteria-changed", { url: `${window.location.pathname}?${newSearchParams}` });

Try searching for "facet-filters" within the theme's javascript files to find it.

[alexmorris]

This might be old but figured this could be helpful for the community. The best and cleanest way I have found is to check the instock filter by default using javascript when the page loads and then hide those specific filters using CSS, this forces the filter to only show in stock items without any backend jiggery pokery and gives you options on how to display them. Hope that helps