Display Sizes on Collection Pages: A Journey Through Code and Creativity

It was a Sunday afternoon, and the sun was streaming through the windows, casting a warm glow across the room as I sat hunched over my laptop, frustrated and sipping coffee like it was my lifeline. We’ve all had those days, staring at screens, wondering why something that sounds simple on paper refuses to work in practice. This time, it was the conundrum of displaying product sizes on Shopify collection pages that was driving me to the brink of insanity. But, as I often remind myself – and any curious soul who happens to be within earshot – coding is all about persistence.

The Eureka Moment of Simple Codes

After a deep dive through Shopify forums, where I encountered discussions about frustrated merchants and mysterious code snippets, I realized I wasn’t alone. One fellow traveler had discovered a snippet that seemed like the beacon of hope:

<p>{{ product.options[0] }}: {{ product.variants[0].option1 }}</p>

Yet, Shopify, in its infinite wisdom, had since evolved, rendering this simple charm obsolete in new iterations. It felt like solving a puzzle where the pieces had decided they’d rather be elsewhere. For those of us using the Impact theme, which tantalizingly offers both product variants and variations, it seemed at first like the perfect challenge.

Grokking Product Variations

The real magic – as we slowly began to unravel – lay in the ability to display those elusive product variations and their availability right there on the collection pages, tempting and informative. It required a small tweaking of perspective and a dash of Liquid (Shopify's templating language). So, buckle up, and let's craft our way through this labyrinth of variables and functions.

{% for variant in product.variants %}
  <span
    style="{% if variant.available %}color: black;{% else %}color: grey; text-decoration: line-through;{% endif %}">
    {{ variant.option1 }}
  </span>
{% endfor %}

Here we were, with a spring in our coding steps. The code checks each variant, sprinkles a little styling magic – colors the size depending on availability – and, just like that, we see the unavailable sizes greyed out with a stylish strikethrough. It’s a dance synchronizing the logic and aesthetics.

Bringing Colors into the Mix

Along the journey, I recollected an amusing incident with my friend Charlie, who once joked that coding is like telling your toddler to clean their room – with very specific instructions, or they’ll throw all their toys in the laundry instead. So, the idea of adding further product details like color seemed daunting, yet thrilling.

Let’s say you want colors to appear alongside sizes – displaying each color as a mini illustrator of choice. The code took a turn, a delightful little exploration I’d like you to try:

{% for variant in product.variants %}
  <div>
    <span
      style="{% if variant.available %}color: black;{% else %}color: grey; text-decoration: line-through;{% endif %}">
      {{ variant.option1 }}
    </span>
    <span> - {{ variant.option2 }}</span>
  </div>
{% endfor %}

A small tweak, and voila! Colors are in harmony with sizes. Who knew those pesky little attributes could bring such joy! Each iteration of the browser refresh brought a sense of victory.

Reflecting on the Code Tango

Let’s face it – Shopify’s ever-evolving environment keeps us on our toes, and what worked last season might be yesterday’s news. The joy – isn’t it always? – is not just in finding solutions but in the shared exploration and learning. It’s like being in a dance, sometimes leading, often following, but always in sync with each passing challenge.

So here we are, with our collection pages displaying sizes and colors, mingling like a perfect party where everyone knows the delight of a good code snippet shared among friends. As the sun dipped low, casting golden hues over my now slightly cooler coffee, I thought of the journey we’d embarked on, with a cheerful wink from those distant Shopify forums. Debugging together, it seemed, was indeed a kind of camaraderie.

Armed with this newfound knowledge, we can now present our shop's wares with an artful clarity that might just be as refreshing as that second cup of coffee.