Code help? I need a backorder message to appear on click.

Shopify Partner
1 0 0

Long story short, my business's in-house web developer accepted another position, and it has fallen to me to redesign my company's product pages. I know a little bit of code, but not much, and I have run into something of a roadblock.

I want my items to show a backorder message if:

  • the inventory for the selected variant is less than or equal to 0 and
  • if the inventory policy is set to continue.

Currently, my code under product-template.liquid looks like this:


{% if product.selected_or_first_available_variant.inventory_quantity <= 0 and product.selected_or_first_available_variant.inventory_policy == 'continue' %}
        <p class="stockmessage">This size/color is backordered {{product.metafields.item.stock_message}}.</p>
{% endif %}


This almost does the trick, but only shows up if you refresh the page after selecting a new variant, which... obviously isn't going to work. I need the backorder message to show up whenever a customer clicks on a backordered variant. I've been working at this for a while, and I *think* I'll need to use Javascript to achieve the result that I want. Trouble is, I haven't the faintest idea where to start.


I am working in the new, updated Debut theme. My website's live theme is an older version of Debut and has the desired functionality already in place, as you can see on this product page:


Here is the store preview with the new version of Debut:


Can anyone help me out?