Here’s a general guide on what you might consider doing.
Please note that the specific implementation may vary based on your theme structure.
Your theme is a paid version, I cannot access it. Please consider hiring a Shopify developer or consulting Shopify’s support for assistance to check more accurately. This “filter by size available” part is much related to logic code liquid.
Solution below as example:
Access Theme Code: From your Shopify admin, go to Online Store > Themes. Find your current theme and click on the “…” dropdown. Select “Edit code.”
Locate Product Template: Find the template file responsible for rendering product pages. This is often named product.liquid or similar.
Modify Code to Filter Available Sizes:
Locate the code responsible for displaying size options.
You’ll need to loop through the available sizes and only display those that are in stock.
The exact code will depend on your theme structure, but it might look something like this:
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">{{ variant.title }}</option>
{% endif %}
{% endfor %}
This code snippet checks if a variant is available and only includes it as an option if it is.
Update Collections and Search Templates:
If you want the size filters to work on collection pages and search results as well, you’ll need to repeat similar changes in the templates responsible for those pages (e.g., collection.liquid and search.liquid).
=> Remember to save your changes, and again, it’s essential to have a backup of your theme before making modifications.
If possible, use a development store or duplicate your theme to test changes before applying them to your live store.