Crafting Clickable Category Tabs Underneath Your Shopify Products

I remember the day clearly—it was one of those tangled afternoons where the world outside seemed almost too bright. I was crouched at my favorite coffee shop, sipping a double espresso as if it were the elixir of productivity. My laptop screen was a battlefield of tabs, all roads converging on one simple endpoint: organizing the chaos of a product page so it became orderly, neat, and friendly enough to embrace every wandering customer. The goal? Clickable categories for product information. “Description,” “Dosage,” “Ingredients”—you know, the usual suspects ready to inform and intrigue. Yet, how to make them both cute and functional?

Ah, the wonders of Shopify challenge us, do they not? Something as small as reorganizing product details can feel like a grand theatrical play. But fear not! Here’s how you can tame this beast, quite amiably if I do say so myself. You’ll be crafting category tabs that look gorgeous and glide with ease following these simple steps.

Step 1: Unleashing the Power of Liquid

As we snaked our way through the code—it was quite the ride—it became apparent that the liquid within Shopify’s quintessential structure would be our trusty steed. First, my friends, open your Shopify admin and take a deep breath.

1. Go to Online Store and select Themes.
2. Now, click the “Actions” button and choose Edit code.

In the vast tapestry of files, you want to find product-template.liquid. This file is your blank canvas ready for a splash of creativity.

Step 2: Sculpting the Tab Structure

Let us wander creatively through code – it doesn’t bite. Insert the following liquid snippets where you’d wish your tabs to appear:

<div class="product-tabs">
  <ul>
    <li><a href="#description">Description</a></li>
    <li><a href="#dosage">Dosage</a></li>
    <li><a href="#ingredients">Ingredients</a></li>
  </ul>
  <div id="description" class="tab-content">{{ product.description }}</div>
  <div id="dosage" class="tab-content">{{ product.metafields.custom.dosage }}</div>
  <div id="ingredients" class="tab-content">{{ product.metafields.custom.ingredients }}</div>
</div>

Notice how each tab links to its own section? A quaint trick of the trade, no doubt.

Step 3: Seasoning with a Touch of CSS

They say a sprinkle of CSS is like poetry for the eyes. It was right there, during the third espresso, where I realized that a bit of style – properly accentuated – can make any content pop. Dive into the assets folder next, and open your theme.scss.liquid or base.css file.

.product-tabs {
  margin-top: 20px;
}

.product-tabs ul {
  list-style: none;
  padding: 0;
}

.product-tabs ul li {
  display: inline;
  margin-right: 10px;
}

.product-tabs .tab-content {
  display: none;
  padding: 15px;
  border: 1px solid #ccc;
  margin-top: 10px;
}

.product-tabs .tab-content.active {
  display: block;
}

Oh, the elegance of simplicity!

Step 4: Bring in the JavaScript Magic

The sun-bathed wood of the coffee table seemed to shimmer as everything fell into place. JavaScript would be the final touch in our artistic endeavor. In your Shopify admin, navigate back to where you added the Liquid and CSS codes and add the following JavaScript:

document.querySelectorAll('.product-tabs ul li a').forEach((tab) => {
  tab.addEventListener('click', function (event) {
    event.preventDefault()

    document.querySelectorAll('.tab-content').forEach((content) => {
      content.classList.remove('active')
    })

    const tabContent = document.querySelector(this.getAttribute('href'))
    if (tabContent) {
      tabContent.classList.add('active')
    }
  })
})

This little script ensures that when a tab is clicked, its corresponding content blooms before your eyes.

The Sum of All Parts

And there it was—before completing that fourth espresso—the product page of dreams, categories snuggled comfortably underneath, whispering their secrets to anyone who cared to listen. It turned chaos into clarity, inviting visitors on a guided tour of information wonders.

As we pack up our laptops and prepare to leave the realm of tabs—imagine the tangible harmony you’ve brought to your site. Order can trickle down through the smallest of organizational efforts, shared with the zest and intimate understanding reminiscent of warm discussions with dear companions. Here’s to creativity and the delightful structure it can bring.