"i only speak liquid" #62: Alpine.js - The Secret Sauce for Interactivity

Hey everyone!

This edition brought to you by the talented Jude (member of Storetasker).

Jude is a talented developer based New Zealand with Jude has a passion for headless e-commerce stores, combining fast, modern frontends with Shopify's powerful backend 🏎️💨

He’s also a member of the Storetasker network 😉

What I’ve been thinking about: Alpine.js - The Secret Sauce for Interactivity

Alpine.js is the sweet spot between simplicity and functionality. It has become increasingly popular in the Laravel community for the ability to easily sprinkle interactivity onto the server-side rendered templates, and this translates perfectly to Shopify themes.

Why Alpine.js is Perfect for Shopify Themes

Let me share why I'm increasingly reaching for Alpine.js instead of heavier alternatives:

• Zero Build Process: Unlike Vue or React, you can drop Alpine.js directly into your theme with a single script tag. No build steps, no webpack configuration, no package.json to maintain. Just pure, simple functionality.

<script defer src="//unpkg.com/alpinejs"></script>

• Familiar Syntax: If you've ever worked with Vue.js, you'll feel right at home. The declarative syntax is intuitive and plays nicely with Liquid:

<div x-data="{ isOpen: false }">
	<button @click="isOpen = !isOpen">
		{% render 'icon-toggle' %}
		{{ section.settings.toggle_text }}
	</button>
	<div x-show="isOpen" x-transition>
		{{ section.settings.content }}
	</div>
</div>

• Progressive Enhancement: Alpine.js respects the web's progressive enhancement philosophy. Your theme remains functional even if JavaScript fails to load – something that's particularly important in e-commerce.

Real-World Example: Quick View Modal

This example demonstrates how easy it is to implement a product Quickview modal using Alpine.js

<div x-data="{ 
  quickView: false, 
  productTitle: '', 
  productPrice: '', 
  variantId: null 
}">
  {% for product in collection.products %}
    <button 
      @click="
        quickView = true;
        productTitle = '{{ product.title | escape }}';
        productPrice = '{{ product.price | money }}';
        variantId = '{{ product.selected_variant.id }}'
      "
    >
      Quick View
    </button>
  {% endfor %}

  <div 
    x-show="quickView" 
    @click.away="quickView = false"
    x-transition.opacity
  >
    <h2 x-text="productTitle"></h2>
    <p x-text="productPrice"></p>
    <button 
      @click="
        addItemsToCart({ items: [{ id: variantId, quantity: 1 }] });
        quickView = false;
      "
    >
      Add to Cart
    </button>
  </div>
</div>

It's all declarative, stays within your theme's context, and requires minimal JavaScript knowledge to maintain.

Beyond Basic Interactivity

I've found Alpine.js particularly useful for:

• Complex dropdown navigation menus

• Cart drawer functionality

• Product option selectors

• Infinite scroll implementations

• Local search filtering

The framework's small size (≈10kb gzipped) means you can add these features without significantly impacting load times.

The Learning Curve

The learning curve is gentle. If you can write HTML and understand basic JavaScript, you can be productive with Alpine.js in hours.

3 links you can’t miss:

• Total TypeScript - I resisted TypeScript for years, now I love it. This was largely due to Matt Pocock’s YouTube channel. The website has interactive tutorials, tips and the newsletter delivers useful bite-sized TypeScript tips every week. If you’re looking to get into TypeScript, or get better at it, this is an amazing resource.

• Just JavaScript - I wish this existed when I was new to JavaScript, and would recommend it to anyone starting out, but equally to experienced developers. The first principles / “mental models” approach helped me understand the language in a whole new way (after 15+ years with JS) and is particularly relevant for modern JavaScript development, where the underlying language is often abstracted away.

• Nir Eyal - Nir’s Book Indistractable was a game changer for me and my productivity. His website has a tonne of articles and free resources to help with productivity and becoming “indistractable”.

1 app I like:

Algolia Search

Algolia has always been one of the best search providers, but their new AI capabilities are really impressive. Beyond just matching keywords, it now understands natural language queries like "comfy summer dress under $50" and the recently added “vector search” understands products at a deeper level. The developer experience is unmatched - clean APIs, solid documentation, and their InstantSearch.js library means you can have AI-powered search running in minutes. Clients that are into data will love the analytics dashboard, and if you want to take it further, the search personalisation and recommendation widgets are super powerful.

One learning as a freelancer:

Time blocking: The only productivity “hack” that has had a lasting impact - and I’ve tried just about everything.

One of the biggest difficulties I found freelancing is managing my schedule. Juggling multiple clients, deadlines, keeping up with communications, the “emergencies” that all seem to happen at the same time. Most freelancers I’ve talked to can relate to this, and it can easily turn toxic with overwhelming to-do lists, long hours, and feelings of guilt and anxiety any time you put the laptop down - a fast track to burnout. Time blocking has completely transformed how I work and has had a surprising positive effect on my personal life and relationships too. I’ve moved from a place of constantly feeling reactive, to feeling (mostly) in control of my time and schedule.

The concept is simple: pre-decide how you'll spend every hour of your day. Think of it like budgeting for your time. The obvious blocks are for coding work, scoping/quoting new projects, client meetings and communication, but now I also block the time I spend with my family, exercising, and even have scheduled doom scrolling and TV binge time - everything gets a dedicated block. The rule I follow is I can move blocks in the future as much as I want, but today’s blocks are immutable (outside of emergencies, of course).

Combined with my focused work approach:

• All notifications off during deep work (except true emergencies)

• The 10-minute rule for distractions (wait before acting)

• Protected coding blocks (uninterrupted focus time)

• Batched communications (no random context switching)

The result has been better quality “deeper” work, feeling more in control of my time and projects and guilt-free scheduled downtime that keeps the burnout at bay. Turns out the best productivity hack, for me at least, isn't a new tool or app, it's simply protecting my time.

Jude