Mastering Your Shopify Homepage: How to Hide Prices on Sold-Out Items in Featured Collections

As a Shopify store owner, you're constantly striving for a clean, intuitive, and conversion-focused shopping experience. One common challenge arises when popular products sell out: how do you manage their display, especially on your high-traffic homepage? Showing a price for an item that's unavailable can be confusing, frustrating, or simply clutter your meticulously designed storefront.

This exact dilemma recently surfaced in the Shopify community forums, sparked by @pitchpinepottery. They sought a solution to hide prices on sold-out items specifically within their homepage's "Featured Collection" on the popular "Be Yours" theme. This isn't just a niche request; it's a crucial aspect of maintaining a professional and user-friendly online store.

Why Hiding Sold-Out Prices is More Than Just Aesthetics

While a tidy display is certainly a benefit, the advantages of concealing prices for unavailable products run deeper:

• Cleans Up Your Display: A professional, uncluttered look immediately improves your site's perceived quality. It helps customers focus on what's available and prevents visual noise.
• Prevents Customer Confusion & Frustration: Imagine a customer seeing a tempting price, only to click through and find the item is sold out. This creates a negative micro-experience. Hiding the price upfront manages expectations.
• Maintains Product Presence Without Misleading: You might want to keep popular, sold-out items on your homepage to showcase your brand's style or hint at future restocks. Hiding the price allows you to do this without implying immediate availability.
• Improves Conversion Focus: By removing pricing from unavailable items, you subtly guide customers towards products they *can* purchase, potentially increasing conversion rates on in-stock items.
• Enhances Brand Perception: A store that anticipates and addresses potential customer pain points, like misleading pricing, projects an image of thoughtfulness and professionalism.

The Challenge: Shopify's Dynamic Nature and Theme Variations

Shopify themes, while powerful, often have unique class structures and rendering logic. What works for a product page might not directly apply to a featured collection section on the homepage, especially across different themes like "Be Yours." The goal is to target the price element *only* when its parent product card is marked as "sold out."

Solution 1: Leveraging the Modern CSS :has() Selector (Recommended for Newer Themes)

The first elegant solution, shared by @tim_1 in the forum, utilizes the powerful CSS :has() pseudo-class. This selector allows you to select an element based on whether it contains a specific child element. In our case, we're looking for a product card that has a "sold out" badge.

How it Works:

Sold-out products in most modern Shopify themes (including many sections of "Be Yours") will display a "sold out" badge or label. This badge typically has a distinct class, such as .badge--soldout. The :has() selector lets us target the entire product card (e.g., .card-wrapper) if it contains this badge, and then specifically hide the price element within that card.

The Code Snippet:

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

Step-by-Step Implementation:

1. Access Your Shopify Admin: Log in to your Shopify store.
2. Navigate to Theme Customization: Go to Online Store → Themes.
3. Customize Your Theme: Find your current theme (e.g., "Be Yours") and click Customize.
4. Open Theme Settings: In the theme editor, look for Theme settings (usually a gear icon or a tab on the left sidebar).
5. Find Custom CSS: Scroll down and click on Custom CSS.
6. Add the Code: Paste the CSS snippet provided above into the custom CSS box.
7. Save Your Changes: Click Save in the top right corner.

This method is generally preferred for its specificity and cleanliness, as it directly targets the desired elements without affecting other parts of your store. It's also less likely to be overwritten by theme updates compared to editing core theme files.

Solution 2: Direct Class Targeting (Alternative/Fallback)

If the :has() selector method doesn't yield the desired results (perhaps due to an older theme version or a different class structure on your specific "Be Yours" theme instance), an alternative is to directly target the price element that is already marked as "sold out." This approach was suggested by @mastroke in the forum.

The Code Snippet:

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

Step-by-Step Implementation:

1. Access Your Shopify Admin: Log in to your Shopify store.
2. Navigate to Theme Code Editor: Go to Online Store → Themes.
3. Edit Code: Click on Actions → Edit code for your current theme.
4. Locate CSS File: In the Assets folder, open assets/component-price.css or assets/base.css. The exact file might vary, but these are common locations for price-related or base styles. If neither exists, look for a file like theme.css or a general stylesheet.
5. Add the Code: Scroll to the very bottom of the chosen CSS file and paste the snippet.
6. Save Your Changes: Click Save.

This method relies on your theme assigning a specific class like .price--sold-out to the price element itself when a product is sold out. You might need to inspect your product grid elements using your browser's developer tools to confirm the exact class names your theme uses.

Crucial Considerations Before You Start

• Backup Your Theme: Before making any code changes, always duplicate your theme (Actions → Duplicate). This provides a quick rollback option if anything goes wrong.
• Inspect Element: If the provided code snippets don't work, use your browser's developer tools (right-click on the sold-out product and select "Inspect") to identify the exact CSS classes for the product card, sold-out badge, and price element in your specific theme.
• Test Thoroughly: After applying changes, clear your browser cache and check your homepage featured collection on various devices and browsers to ensure the prices are hidden as intended and no other elements are adversely affected.
• Theme Updates: Custom CSS added via the Theme Customizer's "Custom CSS" section is generally safe during theme updates. However, direct edits to theme files (like component-price.css or base.css) might be overwritten during major theme updates. Keep a record of your changes.

Beyond Hiding Prices: Optimizing the Sold-Out Experience

While hiding prices is a great start, consider these additional strategies to enhance the customer experience for sold-out items:

• "Notify Me When Available" Buttons: Implement an app that allows customers to sign up for email notifications when a sold-out item is restocked. This turns a potential disappointment into a lead.
• Clear "Sold Out" Labels: Ensure your "Sold Out" badge is prominent and easy to understand.
• Remove from Homepage: For items that won't be restocked, consider removing them entirely from your featured collections to keep your homepage focused on available products.
• Link to Similar Products: On the product page of a sold-out item, suggest alternative, in-stock products to keep customers engaged.

Conclusion

Optimizing your Shopify homepage by strategically hiding prices on sold-out items in featured collections is a small but impactful change that significantly improves user experience and maintains a professional store aesthetic. By following the CSS solutions outlined above, you can ensure your customers always see the most relevant information, guiding them towards a smoother shopping journey.

At Shopping Cart Mover, we specialize in helping Shopify merchants not just migrate their stores but also optimize every aspect of their e-commerce presence, from theme customizations to complex integrations. If you're looking to refine your store's functionality or need expert assistance with your Shopify setup, don't hesitate to reach out to us at shoping-cart-mover.com. We're here to help you build a seamless and successful online business.