Re: Filter Showing Out of Stock Sizes - Dawn Theme

Filter Showing Out of Stock Sizes - Dawn Theme

Ashley_Jemmeson
Tourist
5 0 3

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!

Replies 24 (24)

kgbfashionista
Navigator
345 24 47

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.

Feel free to like my post if it was helpful at all
DariusWS
Shopify Partner
84 1 20

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

kgbfashionista
Navigator
345 24 47

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.

Feel free to like my post if it was helpful at all
DariusWS
Shopify Partner
84 1 20

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

Malessi
Visitor
2 0 1

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

kgbfashionista
Navigator
345 24 47

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:

 

flow 1.PNG

 

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.

Feel free to like my post if it was helpful at all

minhcu
Shopify Partner
61 0 3

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

 

Don't stop grinding

Ujjaval
Shopify Partner
1242 197 213

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

Ujjaval_0-1686823817952.png

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

minhcu
Shopify Partner
61 0 3

Okay let me check on it.

Don't stop grinding

Fildec
Tourist
11 0 2

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
Shopify Partner
84 1 20

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

 

And created shopify flow like this:

DariusWS_0-1695982672535.png

 

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
Tourist
3 0 1

Hi! Where did you add this code snippet?

DariusWS
Shopify Partner
84 1 20

in the flow

AdGirl
Visitor
2 0 0

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
Shopify Partner
84 1 20

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
Visitor
2 0 0

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

dalemmmm
Shopify Partner
1 0 0

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
Visitor
1 0 0

Where did you add this line of code? 

johanson
Tourist
10 0 16

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
Tourist
7 0 2

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.

-------
Samuele
Website: https://ilgergo.com/
Bahia_Designs
Shopify Partner
7 0 2

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.

At Bahia Designs, we create beautiful and usable digital experiences for innovative brands. Shopify Partners since 2013.

alexmorris
Shopify Partner
38 2 27

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 

SurfShackSouth
Tourist
7 0 2

Hey stumbled upon this and i think this is a really good idea. Do you think you could break it down a little bit more for a newbie? Thanks in advance

CWm123789
Visitor
1 0 0

Please can you explain how to do this?