How to Show 2 Categories Per Row on Mobile with Shopify's Flow Theme

You know, the first time I delved into customizing a Shopify theme on mobile, it felt like a curious exploration through an online rabbit hole. There I was, cup of tea in hand, three hours deep into yet another "simple" project that had turned into a full-fledged ordeal. The sun was beginning to set when I realized my mission: getting those stubborn categories to align just the way I imagined – two per row, a perfect duo on the mobile screen. It was like trying to find the last unsucked piece in a mismatched jigsaw puzzle, but more digital.

Thankfully, Trey isn’t alone in this. It's a quaint little eddy that many of us experience in our e-commerce voyage. Let’s dive into this world of pixels and percentages with a dash of humor and perhaps a few more cups of tea.

Understanding the Layout: Why Bother?

Once, during a particularly pensive moment – possibly induced by an overconsumption of caffeine – I pondered why we care so much about layouts. First impressions, I realized, are everything. We’ve got tiny screens, right? And in those spaces, each element has to fit like a well-choreographed dance. We don’t just look; we lay eyes eagerly. So, getting two collection categories side by side makes navigation easier, more intuitive.

Here’s a step-by-step to make that happen. Grab your favorite drink – we might just need it.

Step 1: Access the Theme Editor

Okay, first things first, we need to delve into the mysterious and occasionally intimidating Theme Editor. It’s like finding the control room of your online store where magic happens.

• Go to your Shopify admin dashboard.
• Click on Online Store, and then Themes.
• Find the Flow theme – the canvas of our creativity. Click on Customize.

There's a certain exhilaration that comes with diving into the backend. Here, within these lines of code, lie endless possibilities.

Step 2: Navigate to the Collection List Section

As your tea might be cooling beside you, let’s head to the Collection List section. This is the area where we're going to weave our little magic.

• From the left sidebar in the Theme Editor, locate Collection List.
• Click on it to reveal customization options.

Is it strange that this part feels like opening a treasure chest? Could be the thrill of discovery.

Step 3: Tinker with CSS

Now for the part where we roll up our sleeves and get our hands ever-so-slightly dirty. Time to dive into some coding – don't worry, it's not Shakespeare, just a little CSS.

To make these changes, it’s best we pop open the Edit code option. It opens the world of CSS, our best friend in customization.

• In the Theme Editor, click on Edit code.
• Navigate to Assets and then open the theme.scss.liquid file.

Once here, we’ll add a bit of CSS to make those categories play nice side by side on a mobile screen.

@media only screen and (max-width: 749px) {
  .collection-list__item {
    width: 50%;
    float: left;
  }
}

This bit right here tells our collections, "You two are going to get cozy now."

Step 4: Save and Preview

Hit Save. The exhilarating moment of truth – will our changes be the perfect fit or will they resemble an awkward pair of socks?

• Preview your theme on mobile. Make sure the categories are aligned side by side.

A sigh of relief, a smile of triumph. Sometimes life is a cheeky teacher, and we've earned our little victorious dance.

Reflect and Tweak

Every design, it seems, is an evolving entity. There are countless possibilities, like adding a little padding or adjusting the spacing. Keep tweaking until it feels just right.

Sometimes, I think about early web days when customizing meant altering html files directly, right on the live server. Today, our digital playground gives us options to preview before we launch. Progress feels both a challenge and a gift.

In the end, it's all about making our store not just functional, but a place where visitors want to stay, explore, linger. Much like a good cup of tea on a drizzly afternoon, a well-designed site offers warmth and welcome.

So there, fellow tinkerer of digital realms, we’ve unraveled another thread in the web of online mysteries. Now go on, give your stores that touch of perfection – one row, two collections at a time.