Crafting an Archive Page in Shopify's Studio Theme: A Detailed Guide

Let’s dive into one of those uniquely rewarding projects, the kind where you sit down with a steaming cup of tea, a good playlist humming in the background, and clarity - or chaos, depending on the day - in your head. A few months back, we embarked on a similar adventure, transforming our Shopify store to better communicate not just with our customers but with the ever-hungry web bots nosing through the ether. If you’ve been contemplating the creation of an Archive page for your Shopify store using the Studio theme, much like Laura, this narrative is crafted just for you.

Vision into Code: Setting the Scene

Remember that time we decided to repaint our living room? We wanted it to reflect light in a way that no catalog had ever captured. That’s exactly what reshaping your Shopify theme feels like, a literal brushstroke on the digital canvas.

You, dear reader, want your archive products to speak a different language than your regular collection. So, how about altering that tame “sold out” badge into a bold “LSV ARCHIVE” status when tagged? We’re also tweaking product displays—removing size options, shushing prices, and styling the collection grid a little differently. Here’s the storyboard breakdown, but for code.

Step 1: Changing the 'Sold Out' Button Text

First things first, the coveted button text transformation. Locate the product-card.liquid file. It generally lives in your Sections directory. Here’s the nifty slice of code to weave in:

{% if product.tags contains 'archive' %}
  <button class="btn sold-out">LSV ARCHIVE</button>
{% else %}
  <button class="btn sold-out">{{ 'products.product.sold_out' | t }}</button>
{% endif %}

This snippet checks if the product tag says “archive” and flips the switch on the button text. It's our personalized touch, like embroidering our initials.

Step 2: Hiding the Size/Variant Selector

Brewing our next espresso shot, let’s hijack those variant selectors. Shift your gaze to the product-form.liquid file, again likely lounging in Sections or Snippets. We’re targeting the size options—it’s best for them not to appear unsolicited:

{% unless product.tags contains 'archive' %}
  <!-- Existing variant dropdown code here -->
{% endunless %}

Wrap the existing dropdown code with this conditional. Easy peasy lemon squeezy. This tweak whispers elegance and exclusivity—a quiet nod to arcane mystery.

Step 3: Making Prices Disappear on Collection Pages

Moving on to the League of Collection Pages, you'll find your collection-template.liquid napping in the Templates directory. Here’s the cloak that turns prices invisible:

{% unless collection.handle == 'archive-collection-handle' %}
  <div class="product-price">{{ product.price | money }}</div>
{% endunless %}

Do sprinkle that actual collection handle in there. It’s conjuring charm, altering the feel of the collection template—truly a magician's sleepwalker trick.

Step 4: Altering Product Grid Display

Oh, the beautification of the grid! Let’s reel in our vision to display three products per row instead of four. The collection-template.liquid (or even a CSS tweak) is our campfire here:

.collection-grid-item {
  width: calc(100% / 3 - 20px); /* Adjust 20px to your preferred gutter space */
}

Tuck this snippet into your stylesheet. Each product standing like soldiers in a parade, spaced and graceful.

Final Thoughts: Navigating the Code Maze

Remember how lost we felt when we first ventured to re-shelve our book collection by color instead of genre? Quiet moments of "am I doing this right?" would echo around us. Coding is like that, an exploration, a tactile puzzle where every piece matters.

Laura, we've been in your shoes—clinking around the code, a maze indeed. But once we know which twist to turn and which path leads to candy-land, it becomes almost natural, doesn’t it? Keep a backup of the original files, and don’t rush—enjoy this creative plunge.

And just like snuggling into a well-worn blanket after hours of house cleaning, when you finally refresh that Shopify preview and see your vision brought to life—it feels fantastic. Every keystroke is worth it.

There's beauty in the details, dear friend. Let's wrap ourselves warmly in this technical artistry, smiles as wide as the horizons we're painting together. Cheers to crafting both webpages and friendships in this swirling world of code and commerce!