Customizing Shopify's "Out of Stock" Badge: A Community Solution for Accurate Inventory Display

Displaying Accurate Inventory with Shopify's "Out of Stock" Badge

Hey everyone! I was browsing the Shopify Community forums the other day and stumbled upon an interesting discussion about customizing the "Out of Stock" badge. It seems a lot of store owners want more control over when this badge appears, especially when using the "Continue selling when out of stock" option. Let's dive into what the community had to say and how you can tweak your store to get the desired behavior.

The Challenge: "Continue Selling" vs. "Out of Stock"

The original poster, deaconcarr, wanted the "Out of Stock" badge to still show on products with zero or less stock, even when "Continue selling when out of stock" is enabled. The default Shopify behavior hides the badge when this option is active, which isn't ideal if you want to signal to customers that there might be a delay in fulfilling their order. Essentially, they wanted the badge to indicate that extra processing time is needed.

Understanding the Code

deaconcarr helpfully pointed out the relevant code snippet from their theme, "Horizon", specifically within the _product-card-gallery.liquid file:

        {% 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 product.available == false checks whether the product is generally available for sale, taking into account the "Continue selling when out of stock" setting. This is why the badge disappears when that setting is enabled.

The Solution: Checking Quantity Instead of Availability

So, how do we make the badge appear based on the actual quantity in stock? One approach, suggested by Shadab_dev, involves modifying the code to check the product quantity directly. Instead of relying on product.available, we need to look at the actual inventory level.

Here's how you can modify the code. Keep in mind that this is a general guideline, and the exact implementation might vary depending on your specific theme. **Always back up your theme before making changes!**

1. Access your Shopify theme's code: From your Shopify admin, go to Online Store > Themes > Actions > Edit code.
2. Locate the relevant file: Find the _product-card-gallery.liquid file (or the file responsible for displaying product badges in your theme).
3. Modify the code: Replace the {% if product.available == false %} condition with a check for the product quantity. You'll likely need to access the product's variants and their inventory quantities. Here's an example of how you might do it:

{% assign low_stock = false %}
{% for variant in product.variants %}
  {% if variant.inventory_quantity <= 0 and variant.inventory_management == 'shopify' %}
    {% assign low_stock = true %}
  {% endif %}
{% endfor %}

{% if low_stock %}
  
    {{ 'content.product_badge_sold_out' | t }}
  
{% elsif product.compare_at_price > product.price %}
  
    {{ 'content.product_badge_sale' | t }}
  
{% endif %}

4. Save your changes: Click "Save" in the top-right corner of the code editor.
5. Test your store: Verify that the "Out of Stock" badge now appears correctly for products with zero or negative inventory, even when "Continue selling when out of stock" is enabled.

Explanation of the code

This code snippet iterates through each variant of the product. If any variant has an inventory quantity less than or equal to 0 AND inventory management is handled by Shopify, it sets the low_stock variable to true. Finally, it checks the low_stock variable to display the "Out of Stock" badge.

Important Considerations

• Theme variations: Remember that themes can vary significantly. The exact file and code structure might be different in your theme.
• Inventory management: This solution assumes you're using Shopify's built-in inventory management. If you're using a third-party app, you might need to adjust the code accordingly.
• Impact on sales: Showing an "Out of Stock" badge might deter some customers, even if you're continuing to sell. Consider carefully how this change might affect your sales.

Customizing your Shopify store can seem daunting at first, but by understanding the underlying code and drawing on community knowledge, you can achieve the exact look and functionality you need. Remember to always test your changes thoroughly and back up your theme before making any modifications. Happy selling!