Re: Enable a filter option by default

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

MarkGasior
Tourist
3 0 2

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

Replies 11 (11)
MarkGasior
Tourist
3 0 2

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
Shopify Partner
2405 223 541

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

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing
MarkGasior
Tourist
3 0 2

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

MLN
Tourist
5 0 5

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

Screenshot 2023-08-14 204833.png

 

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

Screenshot 2023-08-14 204935.png

 

3. copy this part of url

Screenshot 2023-08-14 205016.png

 

4. and paste it on your navigation edit

Screenshot 2023-08-14 205106.png

Jonezell
New Member
4 0 0

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
Shopify Partner
2 0 0

Could you  please help me with the steps?

Jonezell
New Member
4 0 0

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
Shopify Partner
194 11 21

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.

filter-1.png

hide-unavailable-1.png

 

AI Search & Product Filter | SB - Check out our Shopify search and filter app to drive more sales

Itai-Koren
Shopify Partner
31 1 33

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
Tourist
10 0 4

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

Itai-Koren
Shopify Partner
31 1 33

Sure.

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

 

Cheers