Shopify Hack: Showing "Out of Stock" Badges Even When You're Still Selling!

The Case of the Disappearing "Out of Stock" Badge

Ever run into that situation on Shopify where you want to keep selling a product even when it's out of stock, but you *also* want to clearly signal to customers that there might be a delay? Yeah, it's a common head-scratcher! That's exactly what deaconcarr brought up in the Shopify Community recently, and it sparked a really helpful discussion.

The problem? When you enable "Continue selling when out of stock," the "Out of Stock" badge vanishes, which isn't ideal if you want to be upfront about potential processing delays. Deaconcarr was looking for a way to keep that badge visible, letting customers know that orders might take a little longer to fulfill. So, let's dive into how you can achieve this!

Decoding the Code: How to Keep That Badge Visible

Deaconcarr pinpointed the relevant code snippet in their theme (the "Horizon" theme, specifically) as being within the _product-card-gallery.liquid file. Here's the original code block they shared:

        {% if product.available == false %} color-{{ settings.badge_sold_out_color_scheme }}{% elsif product.compare_at_price > product.price %} color-{{ settings.badge_sale_color_scheme }}{% endif %}

      "

 >

      {%- if product.available == false -%}
        {{ 'content.product_badge_sold_out' | t }}
      {%- elsif product.compare_at_price > product.price -%}
        {{ 'content.product_badge_sale' | t }}
      {%- endif -%}

The key here is that the badge's visibility is tied directly to product.available. When "Continue selling when out of stock" is enabled, product.available remains `true` even if the inventory is at zero. So, how do we change that?

The Suggested Solution: Checking Inventory Levels

One approach, suggested by Shadab_dev, involves modifying the code to check the actual quantity of the product instead of just the product.available status. While they didn't provide the exact code modification, the idea is spot on.

Here's how you might go about it. Keep in mind this is a general example and might need tweaking based on your specific theme:

1. Access your Shopify theme code: From your Shopify admin, go to "Online Store" > "Themes". Find the theme you want to edit (likely your live theme) and click "Actions" > "Edit code".
2. Locate the file: Find the _product-card-gallery.liquid file (or the equivalent file in your theme that controls product badges).
3. Modify the code: Replace the existing {% if product.available == false %} condition with something that checks the inventory. You'll need to iterate through the product's variants to get the total inventory. Here's an example of how you might do that:

{% assign total_inventory = 0 %}
{% for variant in product.variants %}
  {% assign total_inventory = total_inventory | plus: variant.inventory_quantity %}
{% endfor %}

{% if total_inventory <= 0 %}
  Out of Stock
{% elsif product.compare_at_price > product.price %}
  Sale
{% endif %}

4. Save your changes: Click "Save" in the top right corner.

Important Considerations:

• Theme variations: The exact file and code might be different depending on your theme. Look for the section that handles the "Out of Stock" badge.
• Backup first: Always, *always* back up your theme before making code changes. This lets you easily revert if something goes wrong. Duplicate your theme to a new version and test it there first!
• CSS Styling: You might need to adjust the CSS to ensure the badge looks right after your changes.

Beyond "Out of Stock": A Badge for "Pre-Order" or "Backorder"

Deaconcarr mentioned needing the badge to indicate extra processing time. This opens up another interesting possibility: instead of just showing "Out of Stock," you could create a custom badge that says something like "Pre-Order" or "Backorder." This gives customers even more clarity and manages their expectations effectively.

To do this, you'd need to modify the code to display the custom badge based on your specific criteria (e.g., inventory level, a custom product tag, or a metafield). You'd also need to add the appropriate text and styling to your theme.

Wrapping Up: Customize for Clarity

The Shopify Community thread highlights a really important point: sometimes the default settings just don't cut it! By diving into the code and making small tweaks, you can create a shopping experience that's clearer and more transparent for your customers. Whether it's keeping that "Out of Stock" badge visible or creating a custom "Pre-Order" badge, a little customization can go a long way in building trust and managing expectations.