Change Out of Stock Button Text on Shopify Collection Pages

Are you struggling with managing out-of-stock products on your Shopify store’s collection pages? Many store owners face the challenge of having “Buy Now” or “Add to Cart” buttons visible for products that are no longer available. This can lead to customer frustration and potential loss of sales. In this comprehensive guide, we’ll explore how to effectively change the button text and functionality for out-of-stock items on your Shopify collection pages.

Understanding the Problem

The Default Behavior

By default, many Shopify themes display the “Buy Now” or “Add to Cart” button for all products on collection pages, regardless of their inventory status. This can be misleading for customers and may result in disappointment when they try to purchase an unavailable item.

The Importance of Accurate Inventory Display

Displaying accurate inventory information is crucial for several reasons:

1. Customer satisfaction
2. Improved user experience
3. Reduced cart abandonment rates

The Need for a Custom Solution

While product pages often handle out-of-stock situations correctly, collection pages may require additional customization to achieve the desired behavior.

The Solution: Customizing Your Theme Code

Identifying the Correct File

To implement this change, you’ll need to modify your theme’s code. The exact file may vary depending on your theme, but it’s often found in one of these locations:

1. product-card.liquid
2. collection-template.liquid
3. A specific snippet file for product cards

The Code Modification

Here’s the code snippet that can help solve this issue:

{% if product.available %}
  <button type="submit" name="add" class="btn">
    <span class="add-to-cart-text">{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}Add to Cart{% else %}Select Options{% endif %}</span>
  </button>
{% else %}
  <button class="btn btn--disabled" disabled="disabled">Sold Out</button>
{% endif %}

Explaining the Code

This code does the following:

1. Checks if the product is available using {% if product.available %}
2. If available, it displays either “Add to Cart” or “Select Options” based on the product’s variants
3. If not available, it shows a disabled “Sold Out” button

Implementing the Solution

Locating the Right File

1. Go to your Shopify admin panel
2. Navigate to “Online Store” > “Themes”
3. Click “Actions” > “Edit code” for your current theme

Making the Changes

1. Locate the appropriate file (e.g., product-card.liquid)
2. Find the existing button code
3. Replace it with the provided code snippet
4. Save your changes

Testing the Implementation

After making the changes:

1. View your collection pages
2. Verify that out-of-stock products display “Sold Out”
3. Check that in-stock products show the correct button text

Advanced Customizations

Styling the Buttons

You can further customize the appearance of your buttons using CSS:

.btn--disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}

Adding Pre-Order Functionality

For some stores, offering pre-orders for out-of-stock items can be beneficial:

{% if product.available %}
  <!-- Existing "Add to Cart" button code -->
{% else %}
  <button type="submit" name="add" class="btn btn--pre-order">Pre-Order Now</button>
{% endif %}

Dynamic Button Text

You can create more dynamic button text based on inventory levels:

{% if product.available %}
  {% if product.inventory_quantity > 10 %}
    <button type="submit" name="add" class="btn">Add to Cart</button>
  {% else %}
    <button type="submit" name="add" class="btn">Only {{ product.inventory_quantity }} Left!</button>
  {% endif %}
{% else %}
  <button class="btn btn--disabled" disabled="disabled">Sold Out</button>
{% endif %}

Troubleshooting Common Issues

Button Not Updating

If you’ve made the changes but don’t see any difference:

1. Clear your browser cache
2. Check if you’re editing the correct theme
3. Verify that you’ve saved all changes

Conflicts with Apps

Some third-party apps may override your theme’s button behavior. If you’re using any cart or inventory management apps, check their settings to ensure compatibility.

Theme Updates

Be aware that theme updates may overwrite your customizations. Always backup your code before updating your theme, and be prepared to reimplement changes if necessary.

By implementing these changes, you’ll significantly improve the shopping experience on your Shopify store’s collection pages. Customers will have a clear understanding of product availability, leading to increased satisfaction and potentially higher conversion rates. Remember to test thoroughly after making any changes to ensure everything works as expected across your entire store.