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 wont 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 wont 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.

[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]

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]

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

[DariusWS]

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

[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.

[Malessi]

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