Shopify themes, liquid, logos, and UX
Hey all, I'm working on the Dawn Theme and I don't know anything about coding.
When customers are on my site and they're looking to filter by their size, i'm trying to eliminate them having to check off the "in stock" option under "availability". I would like it to just default to the "in stock" options. I was thinking a way around this was to code something in to have the "in stock" option be checked off by default always when the page loads.
A step further as a bonus would be to hide the "availability" filter altogether but not as important.
Thats the entire point of this. People that are filtering by size obviously want to only know what is in stock in that size, but Shopify makes it so that the size filter shows all products that have that size option, regardless of the stock available.
I guess it’s just philosophical then. As a business would not list something if it’s not in stock. And as a consumer, I assume if it’s listed, it’s available. I couldn’t tell you a single time I’ve used an in-stock filter. As I mentioned before, if there were metrics for filters used, I’d bet in stock one is near the bottom, if not the bottom.
Ok so we are agreeing on this but you aren't understanding the problem here. Let's say I have 30 shoes listed on my site that have size options 7-12. Some of the shoes are out of stock in size 8. When a customer is on the site trying to filter by their size 8, shopify will show ALL of the 30 shoes that list size 8 as an option REGARDLESS if they are out of stock or not. I WANT to remove the in-stock filter but thats the only way for the filters to work correctly. I completely agree, it is a pointless and unnecessary step.
I'm not sure if its the same thing but I had someone recommend setting something up to delete the variants when they are sold out, but this makes returns and exchanges a headache and messes with our analytics. What do you recommend I try for variant metafeilds?
Essentially it would replace using the built in size filter using the search and discovery app. It should remove options that are not in stock(0). I have not tried it specifically this way, but in theory it should do what you need. Create a variant metafield name size and assign to each variant accordingly. Then add as filter in search and discovery app.
In order to hide the availability filter and make the "in stock" filter in the Dawn Theme checked by default, take the following actions:
Default Selection of Checkboxes:
Include the following JavaScript in theme.js or theme.liquid, either before the </body> tag:
JavaScript
Make a copy of the code document.addEventListener("DOMContentLoaded", function() { const inStockCheckbox = document.querySelector('input[name="availability[in_stock]"]'); if (inStockCheckbox) { inStockCheckbox.checked = true; } });
Hide the filter for availability:
After the theme, add this CSS.CSS: Copy CSS code.display: none; filter--availability
Save the modifications you made.
These changes will guarantee that the "in stock" option is used by default and provide the flexibility to conceal the availability filter when required.
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025