New Shopify Certification now available: Liquid Storefronts for Theme Developers

Enable a filter option by default

MarkGasior
Tourist
3 0 1

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 5 (5)
MarkGasior
Tourist
3 0 1

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 532

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 1

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

MLN
Visitor
2 0 3

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
Visitor
3 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