Hiding Prices of Sold-Out Products in Shopify's Dawn Theme: A Journey

Sometimes, life throws us into situations where we learn the hard way. Picture this: one casual Saturday afternoon, I was browsing through our online store—a collection of eclectic wonders that somehow makes sense. Suddenly, I noticed a glaring issue that felt like finding a glaringly off-note in a favorite song. Our homepage collection unabashedly displayed prices for sold-out items, sparking confusion for eager visitors. It was as if we were offering a ghostly inventory to our growing audience. That day, my quest began—to hide those pesky prices on our Dawn Theme.

A Morning in Codeville

The journey into Shopify’s Dawn Theme felt like a walk into the wilds of Codeville. Cluttered with options and customizations, it was equally thrilling and confounding. Have you ever mistakenly pushed a door that clearly says pull? That was every first attempt at fixing our homepage.

Discovering the Hidden Code Pathways

So, how did we hide these spectral price tags from blankets of sold-out items on our homepage collections? Let's take a peek behind the curtain.

Step 1: Wake the Dawn

First, we bargained with the theme's coding wilderness. Begin by logging into your Shopify admin and head straight to the Online Store tab. Press onwards to Themes, and there, like an old friend, you’ll find Dawn. Click Actions followed by Edit code—brace yourself for the journey!

Step 2: Locating the Product Card Snippet

Within the vast forest of code awaits the precious file: product-card.liquid. Under Sections, you’ll find this snippet. It's the architect of how products appear on your site. Click—plunge right in.

Step 3: Assess the Terrain

The next move is akin to scanning an ancient map. Pour over the file; there is essential liquid logic here. Seek out the segment that controls how prices are displayed. The code lines mentioning {{ product.price | money }} become your beacon.

Step 4: Code Your Roaring Victory

Here's where the plot thickens. We’ll wield a sword of logic. To hide prices of sold-out products, you enter this magic incantation within your liquid tag:

{% unless product.available %}
  {% comment %} Do nothing - the product is sold out {% endcomment %}
{% else %}
  <div class="price">
    {{ product.price | money }}
  </div>
{% endunless %}

This liquid charm checks availability like a careful watchman. If the product is available, it will whisper the price; otherwise, it remains silent—a sold-out secret.

Step 5: Save, Refresh, Rejoice!

Marvel at the polished magic: click Save. Refresh your homepage and bask in the serene absence of ghostly numbers on sold-out goods. Better than opening a flawless jar of pickles.

The Metaphorical Cupcake: Topping of CSS

We didn’t stop there, though. Our curiosity piqued—how could we smoothen this further? Enter: CSS.

Sprinkling Aesthetic Sugar

Sometimes, the appearance of your store needs a sprinkle. We wanted to ensure the layout stayed enticing even without prices.

Step 1: Locate assets/main.css

Back in the code under Assets, main.css waits patiently. It's the style guardian of your domain.

Step 2: Add a Sweet Line

To subtly hide where the prices sit for sold-out items, we cast this visual spell:

.product-card__price:empty {
  display: none;
}

This line simply ensures that if there's no price to whisper about, the space takes a bow and fades away.

Reflecting on A Journey Paved with Liquid Gold

With our obstacle behind us, we leaned back for a breather, sipping tea as if savoring a long-awaited victory. What stood out was the craftsmanship of shaping an online presence that fully represented our intentions. We realized there’s joy in the creation itself, beyond solving technical glitches.

In the end, our Dawn-themed site looked as it should—mischievous prices vanished where sold-out products lay, leaving clarity for our customers. The experience became a journey we embraced, a gentle reminder of our shared digital adventure. And if anyone spun tales of confusion and inventory ghosts again, we knew we'd battle alongside them, wise and willing.