Creating Dynamic Collection Tabs and Mobile Accordions on Shopify

Some time ago, there I was, sipping a lukewarm cup of coffee, staring helplessly at my computer screen trying to figure out how on earth to make my Shopify store more engaging. It wasn't just about the aesthetics—it was about crafting an experience. The struggle was real, turning vanilla pages into interactive wonderlands without having the faintest idea how to code. And this brings us—yes, all of us—to the story of tackling Shopify collection tabs with a dash of mobile accordion magic. Here, we'll transform our shops from "meh" to marvelous, creating user-friendly elegance that delights both desktop and mobile users.

Decoding the Enigma: Tabs on Desktop

We begin where digital dreams take shape—the desktop interface. Picture for a moment a world where your collections are neatly organized in tabs, inviting customers like a secret garden with various paths to explore. It's not as daunting as it might seem, my friends.

First things first, let's roll up our sleeves. Open the theme.liquid file in your Shopify dashboard. You can find this under the “Online Store” section by selecting “Actions” and then “Edit code.”

Next, locate the section where you wish to add these elusive tabs—normally, this is within the collection template. Once you’re there, insert some HTML to structure those tabs:

<div class="tabs">
  <button class="tablinks" onclick="openTab(event, 'Collection1')">Collection 1</button>
  <button class="tablinks" onclick="openTab(event, 'Collection2')">Collection 2</button>
  <button class="tablinks" onclick="openTab(event, 'Collection3')">Collection 3</button>
</div>
<div id="Collection1" class="tabcontent">
  <!-- Content for Collection 1 -->
</div>
<div id="Collection2" class="tabcontent">
  <!-- Content for Collection 2 -->
</div>
<div id="Collection3" class="tabcontent">
  <!-- Content for Collection 3 -->
</div>

Once we have our skeletal structure, it’s time to infuse those tabs with lively color through CSS. Add these styles to your styles.scss or equivalent stylesheet:

.tabs {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}
.tablinks {
  background-color: #f1f1f1;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}

The sprinkle that sets everything in motion is, of course, JavaScript. Whisper to JavaScript —your best ally—to grace our project with functionality:

function openTab(evt, collectionName) {
  var i, tabcontent, tablinks
  tabcontent = document.getElementsByClassName('tabcontent')
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = 'none'
  }
  tablinks = document.getElementsByClassName('tablinks')
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(' active', '')
  }
  document.getElementById(collectionName).style.display = 'block'
  evt.currentTarget.className += ' active'
}

There’s something satisfying about seeing everything snap into place—a digital jigsaw, if you will.

Transitioning into Mobile: Accordion Style

Flip the scene to our pocket-sized wonder, the mobile world. Here, the user experience calls for an accordion—a friendly way to stack information that’ll open and close like a magician’s hat.

Start by tweaking the HTML structure slightly to make it accordion-friendly:

<button class="accordion">Collection 1</button>
<div class="panel">
  <!-- Collection 1 content -->
</div>
<button class="accordion">Collection 2</button>
<div class="panel">
  <!-- Collection 2 content -->
</div>
<button class="accordion">Collection 3</button>
<div class="panel">
  <!-- Collection 3 content -->
</div>

Now we move gently into the world of CSS and make it pop:

.accordion {
  background-color: #eee;
  cursor: pointer;
  padding: 18px;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

Finally, summon JavaScript to do its magic—again:

var acc = document.getElementsByClassName('accordion')
var i

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener('click', function () {
    this.classList.toggle('active')
    var panel = this.nextElementSibling
    if (panel.style.display === 'block') {
      panel.style.display = 'none'
    } else {
      panel.style.display = 'block'
    }
  })
}

Joy in the Journey

And there you have it. We’ve navigated through a maze of code—a code that transforms, just like magic, one moment of confusion into the elegance of interactivity. Remember always to back up your work, test across devices, and, most importantly, smile at every little victory. As we forge on, there’s tranquility in shared discovery—a digital camaraderie that reminds us that coding can be as comforting as a heartfelt chat. Let's always find joy in the details, the lines of code that were daunting and now stand majestically under our fingertips.