Solved: The Studio Theme Bug Making In-Stock Products Look Sold Out on Shopify Collection Pages

Hey there, fellow store owners! Ever had that heart-stopping moment when you browse your own collection pages, only to see 'Sold Out' splashed across products you know are fully stocked? It's a frustrating bug that can seriously impact your sales, and it's a topic that recently popped up in our Shopify community forums. I wanted to dive into a specific discussion about the free Shopify Studio theme, version 15.4.1, and share the insights and solutions that came out of it.

One of our community members, Tabitha_Kemp, brought this exact issue to light. She reported that her Studio theme was incorrectly displaying in-stock products as 'Sold Out' on collection pages. The culprit? A missing parameter in the render 'price' call within the snippets/card-product.liquid file. This is a classic example of a small code oversight having a big impact on your storefront.

First Things First: Backend Checks Are Crucial

Before we even think about touching code, it's always a good idea to rule out the basics. As Tim_1 wisely pointed out in the thread, sometimes a 'sold out' display isn't a theme bug at all, but rather an issue with your inventory and fulfillment settings. It's easy to overlook these, especially when you're busy running your business!

So, take a moment to double-check these vital areas:

• Inventory Levels: Are your product variants actually marked as 'in stock' in your Shopify admin? Sounds obvious, but sometimes a missed update or a sync error can cause discrepancies.
• Fulfillment Locations: Do you have a location set up that can fulfill the item? If Shopify can't find an active location with available stock, it might default to 'sold out'.
• Delivery Methods: Are your delivery methods properly configured for the regions you sell to? An item might be available, but if there's no way to ship it to a customer's location, it could show as unavailable.
• Market Settings: If you're selling internationally with Shopify Markets, ensure your markets are correctly set up and that products are available in the relevant regions. A product might be in stock for your domestic market but appear sold out for an international customer if market settings aren't precise.

Once you've confirmed all these backend settings are in order and the problem persists, then it's time to roll up our sleeves and look at the theme code.

The Code Fix: Unmasking Your In-Stock Products

The core of Tabitha_Kemp's problem, and the solution that emerged from the community, lies in a small but mighty Liquid snippet called card-product.liquid. This file is responsible for how individual product cards (the little boxes you see for each product) are rendered on your collection pages.

Locating and Editing the File

Here's how to navigate to the right place in your Shopify admin:

1. From your Shopify admin, go to Online Store > Themes.
2. Find your Studio theme (make sure it's the one you're actively using or testing).
3. Click the Actions button, then select Edit code. (Pro tip: Always duplicate your theme before making code changes, just in case!)
4. In the left-hand sidebar, open the Snippets folder.
5. Look for and click on the file named card-product.liquid.

The Missing Parameter: show_availability: true

Mustafa_Ali's suggestion in the thread hit the nail on the head. The issue stems from the render 'price' call within card-product.liquid not explicitly telling the 'price' snippet to check for and display product availability. Without this parameter, it can sometimes default to showing 'Sold Out' even when inventory is present.

You're looking for a line that likely looks like this:

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}

To fix it, you need to add show_availability: true. Your updated code should look like this:

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true, show_availability: true %}

Once you've made this change, click Save in the top right corner of the code editor.

An Alternative or Additional Parameter: show_badges: false

Namphan also offered a solution, suggesting the addition of show_badges: false to the same render call. While show_availability: true is the more direct fix for the 'sold out' display, sometimes badge logic can interfere. If the primary fix doesn't quite get you there, or if you're experiencing other display anomalies, you could try this version:

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true, show_badges: false %}

Or, if you want both explicit availability checking and to ensure badges aren't causing issues, you could combine them:

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true, show_availability: true, show_badges: false %}

Why This Matters and What to Do Next

This bug highlights how crucial it is for your storefront to accurately reflect your inventory. Misleading 'Sold Out' labels are a conversion killer! Customers will simply move on, assuming the product isn't available, even if it is. By making this small but impactful code adjustment, you ensure your collection pages are telling the truth about your stock.

After saving your changes, make sure to clear your browser cache and then visit your collection pages to confirm that your in-stock products are now correctly displayed with their prices and availability. Test on a few different products and pages to be absolutely certain. It's a quick fix that can make a world of difference for your customers' shopping experience and your bottom line. Big thanks to Tabitha_Kemp for reporting it and to the community, especially Mustafa_Ali and Namphan, for chiming in with helpful solutions!