Shopify Homepage Hack: How to Hide Sold-Out Product Prices on Featured Collections

Ever found yourself wanting to tidy up your Shopify homepage, especially when popular items sell out? Showing a price for something unavailable can be confusing or frustrating for customers. This challenge recently surfaced in the Shopify community forums, sparked by @pitchpinepottery, who needed to hide prices on sold-out items specifically within their homepage's "Featured Collection" on the "Be Yours" theme.

Why Hide Sold-Out Prices?

It's more than just aesthetics! Hiding prices for sold-out products on your homepage:

• Cleans Up Your Display: A professional, uncluttered look.
• Prevents Customer Confusion: No more "Is this available?" questions.
• Maintains Product Presence: Showcase popular items without misleading customers about availability.

Community Solution #1: Targeting the 'Sold Out' Badge

The first helpful response came from @tim_1, suggesting a clever CSS snippet. The trick is to identify that sold-out products typically have a "sold out" badge. We can use this badge as a reference point to hide the price within the same product card, leveraging the modern CSS :has() pseudo-class.

Here's the code @tim_1 shared:

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

Add this to your theme's "Custom CSS" section (Online Store → Themes → Customize → Theme settings → Custom CSS). This is generally the safest place for minor style adjustments, as it's less prone to being overwritten by theme updates.

To illustrate, here are the before-and-after images:

→

Community Solution #2: A Theme-Specific Approach (for "Be Yours" and others)

When @pitchpinepottery reported that @tim_1's code didn't work for their "Be Yours" theme's homepage, it highlighted the importance of theme-specific class structures. This is where @mastroke stepped in with an invaluable alternative: a more direct CSS selector targeting a common class for sold-out prices.

@mastroke's solution focuses on the price element itself if it carries the price--sold-out class, often found within a .card-information container. This is a very robust way to hide prices where themes explicitly mark them as sold out with a dedicated class.

Here's the alternative CSS snippet:

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

Step-by-Step Implementation Guide

Ready to hide those prices? Here's how to try both solutions. Always duplicate your theme before making any code edits!

Method A: Add to Custom CSS (Try This First)

1. In your Shopify admin: Online Store → Themes.
2. Click Customize on your current theme.
3. Go to Theme settings (gear icon) → Custom CSS.
4. Paste @tim_1's code:

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

5. Click Save and check your homepage. If it works, you're done!

Method B: Edit Theme Files (If Method A Fails)

If Custom CSS didn't work, try editing theme files directly. Remember to back up!

1. Go to Online Store → Themes.
2. Click Actions (three dots) on your current theme, then Duplicate.
3. On your *live* theme, click Actions again and choose Edit code.
4. In the Assets folder, find assets/component-price.css or assets/base.css.
5. Scroll to the very bottom and paste @mastroke's CSS:

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

6. Click Save and check your homepage's featured collection.

Final Tips from the Community

A quick shout-out to @PaulNewton: always try searching the Shopify community forums first! Solutions are often already there. And remember these golden rules for any theme customization:

• Always Backup: Duplicate your theme before editing any code.
• Use Browser Dev Tools: If neither solution works, right-click on the price, select "Inspect," and find the correct CSS classes your theme uses. This is your secret weapon!
• Test Thoroughly: Confirm changes across different devices and browsers.

These small, thoughtful improvements really elevate the shopping experience. The Shopify community is an incredible resource for these kinds of challenges, and it's fantastic to see store owners and experts collaborating to find practical solutions. Don't let a little code intimidate you; with a backup and these tips, you're well-equipped to make your store shine!