How to set 'In stock' as default in the 'Availability' filter?

[MarkGasior]

Is there a way to set/enable the 'In stock' option in the shopify 'Availability' filter by default when a customer opens a collection? 

[MarkGasior]

Hi,
Thanks for the information. Currently, we are using the Size and Availability filters to display a particular size in stock. I have been trying to find an automated solution for customer to just select the size filter and it would only display products with their size and in stock (greater than 0 inventory).
What advanced filtering system are you referring to? I can see a way to set it up with Tags but how to automate the tags when a variant has zero inventory? 

[flareAI]

Hello @MarkGasior,

Greetings! I am Gina from the flareAI app helping Shopify merchants get $6Million+ in sales from Google Search, on autopilot.

Unfortunately, there is no built-in feature in Shopify to set the "In stock" option in the availability filter as the default option when a customer opens a collection page. However, you can achieve this using some custom code.

Here are the steps to set "In stock" as the default option in the availability filter:

1. Go to your Shopify admin panel and click on "Online Store" > "Themes".
2. Find the theme you are using and click "Actions" > "Edit Code".
3. In the left-hand column, click on "Assets" and then click on "theme.js" to open the file.
4. Scroll down to the bottom of the file and add the following code:
$(document).ready(function() {
// Set "In stock" as the default option in the availability filter
if ($(".collection-filter__form select[name='availability'] option:first-child").text() == "In stock") {
$(".collection-filter__form select[name='availability'] option:first-child").prop("selected", true);
}
});
5. Save the changes to the file and refresh your website to see the changes take effect.

This code will select the "In stock" option in the availability filter by default when a customer opens a collection page. If you want to set a different option as the default, simply change the text "In stock" in the code to the text of the option you want to set as the default.

Note that this code may not work with all Shopify themes, and it's always a good idea to test any custom code changes on a development or test store before implementing them on your live website.

Gina

[MarkGasior]

Hi Gina, unfortunately the code did not work with our shopify theme (Testament). Thank you for your time!

[MLN]

Dear @MarkGasior I found some alternative. Maybe you find it useful. When managing your navigation with links toward collection you could manually put links and in those links you could include "in stock" addition. Please take a look on these screenshots:

1. navigate to some collection you have and check it's url

2. check "in stock" filter on, and check url again.

3. copy this part of url

4. and paste it on your navigation edit

[Jonezell]

We just installed the Camouflage app which has this feature for free and you don't need to add any custom code: https://apps.shopify.com/camouflage

[pratiknagariya]

Could you  please help me with the steps?

[Jonezell]

Yes, do this:

1. install the camouflage app

2. open app and click on “advanced setup”

3. Scroll down and check the box under the “Filter sold out variants from Collection pages” section

4. click update settings button

and the app creator made this feature free so you don’t need a paid plan to use it 

[Nancy_Drake]

Hi,

You can hide unavailable variants from the collection or set up the filter to show only available options.

With AI Search & Product Filter, you can accomplish either of these tasks. This ensures that only pertinent filter choices are visible, removing the necessity for users to manually toggle the 'In stock' filter.

[Itai-Koren]

You can actually do it by adding the filter in the collection liquid file, where the loop happens.

See the relevant example from the docs here

[anatchim]

It would be fab if you could guide us through on how to do it 🙏

[Itai-Koren]

Sure.

Send me an email and we'll take it from there.

Cheers

[LaraRamsey]

I tried a lot of apps to achieve this, but they all made by store slower.

The only one that worked and didn't impact my store speed was Hide Sold Variants by Scala:

https://apps.shopify.com/scala-hide-sold-variants

They have a builtin feature to achieve this automatically, but they explained to me that depending on your theme is better if you ask them to set it up for you.