Shopify Homepage Refresh: Expert Tips to Hide Prices on Sold-Out Items

Hey fellow store owners! Let's talk about something that comes up pretty often in the Shopify community – keeping your homepage looking sharp, especially when you have popular items that fly off the digital shelves. We all love to show off our best sellers, but what happens when they're, well, sold out?

Recently, a store owner, @pitchpinepottery, brought up a classic challenge in the forums: they wanted to hide the prices on sold-out items specifically within their 'Featured Collection' section on the homepage. They'd already managed to do it elsewhere in their shop, but the homepage was proving to be a stubborn spot, especially with the 'Be Yours' theme.

Why Hide Sold-Out Prices?

It's a small detail, but it makes a big difference in customer experience. Imagine a potential buyer landing on your homepage, seeing a stunning product, only to notice it’s sold out, with a price still listed. It can be a little jarring, or even frustrating. Hiding that price keeps the focus on the product's aesthetic value and its 'sold out' status, subtly building demand and encouraging sign-ups for restock notifications, rather than highlighting something they can't immediately purchase.

Diving into the Community Discussion: Initial Attempts & Insights

The community quickly jumped in to help @pitchpinepottery. The beauty of the Shopify forums is seeing different experts approach the same problem from various angles.

One of the first suggestions came from @tim_1, who offered a clever CSS snippet. The idea was to leverage the 'sold out' badge that Shopify themes typically add to out-of-stock products. If a product card has that badge, we can target its price and hide it. Here's what @tim_1 shared, along with helpful before-and-after visuals:

.product-grid .card-wrapper:has(.badge--soldout) .price {
  display: none;
}

And those crucial visuals that really help illustrate the point:

→

However, @pitchpinepottery reported back that this specific code didn't quite do the trick for their 'Featured Collection' on the homepage. This is a common hiccup! Different themes, or even different sections within the same theme, can use slightly varied CSS class names or structural hierarchies. It's why sometimes a solution that works perfectly in one spot needs a little tweak for another.

Before diving into more code, @mastroke and @PaulNewton reminded everyone about best practices. @mastroke asked for the store URL (smart move for debugging!), and @PaulNewton gave a friendly nudge about searching the forums first and checking theme-specific documentation. Great advice that saves a lot of time!

The Solution: Targeting 'Sold Out' Prices Directly

After that initial attempt, @mastroke came back with a more direct approach that proved to be effective. This solution targets the specific CSS class that many Shopify themes (including 'Be Yours' and others) apply to the price element when a product is sold out: .price--sold-out. This is often a more reliable selector because it's directly tied to the sold-out status of the price itself, rather than relying on a separate badge element being present in a specific parent container.

Here's how you can implement this solution for your 'Be Yours' theme (or most other modern Shopify themes):

1. Access Your Theme Code:
   • From your Shopify admin, go to Online Store.
   • Click on Themes.
   • Find your current theme (it should say 'Currently installed').
   • Click the Actions button (usually three dots) and select Edit code.
2. Locate the CSS File:
   • In the left-hand sidebar, you'll see a list of files. You're looking for a CSS file where you can add custom styles. Common files are assets/component-price.css or assets/base.css. The exact file might vary slightly, but these are good starting points.
   • Open one of these files (e.g., assets/component-price.css).
3. Add the Custom CSS:
   • Scroll all the way to the bottom of the file.
   • Paste the following code snippet:

   .card-information .price.price--sold-out {
     display: none;
   }
   

   • This code specifically targets the price element within a product card (.card-information) that also has the .price--sold-out class, telling it not to display.
4. Save and Check:
   • Click the Save button in the top right corner.
   • Go to your online store's homepage and refresh. Check your 'Featured Collection' section to see if the prices on sold-out items are now hidden.

A note on @tim_1's code: While it didn't work for @pitchpinepottery's specific homepage section, the :has() selector is a powerful, modern CSS feature. If the above solution doesn't work for your specific theme or section, and you're comfortable with inspecting your browser's developer tools, you might find that adapting @tim_1's approach with different parent/child selectors could still be viable. It often comes down to the precise HTML structure of your theme.

Always remember to test thoroughly after making any code changes, and consider backing up your theme before you start, just in case! It's a good habit to get into, especially when you're tweaking core files. And if you're ever unsure, the Shopify community is always a fantastic resource, ready to jump in and share their expertise, just like they did for @pitchpinepottery. Happy customizing!