How to Fix the "Sold Out" or "Unavailable" Badge on Collection Pages
If you've noticed that your bundles are displaying a "Sold Out" or "Unavailable" badge on your collection pages, don't worry—your bundles are still available for purchase. This issue is often related to how some Shopify themes handle bundle products. In this article, we'll guide you through the steps to resolve this issue.
If you are looking for a way to fix Quick Add buttons on collection pages, please see the following guide: How to Fix Quick Add Buttons for Bundles
First, Check Your Inventory Settings
Make sure your bundles are set to “Inventory not tracked” in the Shopify admin. Bundles rely on the inventory of their components, not their own stock. You can learn more about this setting here.
If your inventory settings are correct and the issue persists, proceed with the steps below.
Why Does This Happen?
Product bundles are a relatively new feature on Shopify, and not all themes have been updated to support them correctly. Unlike regular products, bundles don’t have their own inventory—they rely on the availability of the individual components that make up the bundle. Some themes mistakenly check the inventory status of the bundle as a whole rather than its components. When the theme sees no dedicated inventory for the bundle, it incorrectly assumes the bundle is sold out and displays the “Sold Out” or “Unavailable” badge on the collection page.
How to Fix It
To resolve this issue, you'll need to make a small adjustment to your theme's code. The goal is to ensure that your theme correctly identifies and displays bundles.
- Access Your Theme Code:
- Go to your Shopify admin panel.
- Navigate to Online Store > Themes.
- Click on the Actions dropdown next to your current theme and select Edit code.
- Locate the Relevant Template File:
- Look for the file that controls how products are displayed on collection pages. This is typically a file named something like
card-product.liquid.
- Look for the file that controls how products are displayed on collection pages. This is typically a file named something like
- Add a Condition for Bundles:
- Within this file, you'll need to find the place where the badge is rendered and ensure that it does so with
if card_product.available == false
- Within this file, you'll need to find the place where the badge is rendered and ensure that it does so with
- Save Your Changes:
- After adding the code, save the changes to your theme file.
Once you've updated your theme's code, go back to your store's collection pages and check if the "Sold Out" or "Unavailable" badge has been removed from your bundle products. Click on a bundle and try adding it to your cart to ensure everything is functioning correctly.
If you're not comfortable making these changes yourself, or if you need additional help, we're here for you! We can assist you with the code adjustments as a collaborator on your store. Simply reach out to us, and we'll be happy to help.