How to Display Available Sizes Under Product Cards in Shopify Dawn Theme

Picture this: a lazy Sunday afternoon, rain softly tapping against the window, the perfect setting for a 'browse and buy' spree. My imagination ran wild as I pictured myself triumphantly finding the perfect shirt for summer—only to hit a snag when I couldn't quite decide which size to pick. Wouldn’t it be delightful if those tiny options appeared magically under each product card? That got me thinking, what if we could tweak Shopify's Dawn theme to save us from needless clicking?

A Moment of Epiphany: Displaying Size Variants

We've all been there, haven't we? That moment when you're navigating your favorite online store, fingers ready to click, yet feeling slightly irked because the information you crave—the available sizes—is tucked away, just out of sight. Our eyes dart eagerly over product thumbnails, intrigued by possibilities, but wouldn't it be so much more magical if they could see sizes immediately?

Well, let's make that happen. With Shopify's Dawn theme, it's entirely possible, and the best part? It’s not half as daunting as overcooked spaghetti.

The Quest Begins: Edit Your Liquid Template

Gather 'round, fellow adventurers. First things first, we're diving into Shopify's mystical realm of Liquid—a language that sounds like a potion from Harry Potter. The trick is to do it precisely, like threading a needle after two espressos. Follow these steps:

1. Navigate to your Shopify Admin
   Head over to your Shopify admin—like a noble hero ascending the staircase of a digital castle.

2. Find Your Dawn Theme
   In the online store section, click ‘Themes.’ The Dawn awaits your command in the theme library. Picture it: your Blank Canvas.

3. Customize Your Dawn Theme
   Choose the ‘Customize’ button like choosing your destiny, except less intimidating and with fewer dragons.

4. Venture into the Code Editor
   It’s time to enter the Code Editor. Click on ‘Edit Code’—think of it as entering an enchanted forest, but more organized.

5. Locate the Collection Template
   Look within the sections folder for collection-template.liquid—it’s like finding a unicorn (except you’ve used a handy search bar).

Crafting the Magic: Injecting the Code

Unleashing the magic is next. Imagine adding the perfect spice blend to your grandmother’s famous recipe. Here it goes:

<!-- Add this snippet wherever you want the sizes to appear, typically under the product title or price -->

{% for variant in product.variants %}
  <span class="available-size">{{ variant.option1 }}</span>
{% endfor %}

See? Less about eye of newt and more about simple elegance. This snippet will seamlessly display your product sizes, like stars twinkling gently across the night sky—aesthetics and functionality combined!

Reflect and Revel: Style Those Sizes

Ah, but wait! We mustn’t forget the cherry on top—the sprinkles on our digital sundae. It's time to style those size options so they don’t just function well but look utterly fabulous doing it.

1. Find Your Styles
   With the precision of a chef garnishing a dish, find the assets folder and open base.css.

2. Add the Styling
   Once armed with your stylesheet, add a touch of elegance like so:

.available-size {
  font-size: 14px;
  display: inline-block;
  margin-right: 5px;
  background-color: #e0e0e0;
  padding: 2px 5px;
  border-radius: 3px;
}

Just like that, our sizes transition from mere text to harmonious notes within a grand symphony.

The Grand Reveal: Witness Your Work

And there we have it! Close your trusty editor, navigate to the collection page, and take in the sight. Bask in the glory of something that not only works but actually makes sense—a digital victory, if you will.

Once, all those extra clicks felt as cumbersome as donning an old itchy sweater. Now, however, everything’s smoother, faster—like a river running swiftly downstream, sizes revealed without hassle. It's an upgrade anyone on Shopify would appreciate, and it started right here, with a few lines of Liquid and style.

Shall we celebrate with a cup of tea or perhaps dive into another epic quest of Shopify customization? The choice, dear reader, is yours.