Help with Shopify product page — size options not crossing out when out of stock + pre-order button logic

Hey Guys,

I’m working on customizing a Shopify product page and hit a roadblock with variant handling.

What I want to achieve:

• Product has multiple sizes (A1, A1L, A2, A2L, A3, A3L, A4, etc.).
• When a size is out of stock, it should appear crossed out and grayed out in the size selector.
• If the customer clicks that out-of-stock size, the “Add to Cart / Buy Now” button should change to a Pre-order button instead.

The problem:
When I enable Shopify’s “Continue selling when out of stock”, the variants don’t get crossed out. They stay selectable as if in stock, and the page keeps showing “Add to Cart / Buy Now” instead of a pre-order option.

Extra context:

• The block of code I’m working with isn’t a generic theme snippet — it’s part of a custom section.
• So far, I’ve tried handling this with variant availability checks in Liquid, but it doesn’t play nicely with the “continue selling” setting.
• My thought is maybe I need a custom JS + Liquid combo to check inventory and dynamically switch the button/variant states.

Main question:

• Is it better to custom-code this logic (Liquid + JS for inventory checks and button states)?
• Or is it more reliable in the long run to just use an app like WOD – Pre-Order to handle pre-purchases?

Has anyone here implemented something similar (crossed-out variants + conditional pre-order button)? Would love some pointers or even a snippet direction to go in.

Thanks in advance 🙏