Building Reactive Shopify Themes using AlpineJS

AlpineJs brings a easy reactive experience to you Shopify themes. As someone who primarily works within the Shopify ecosystem and has done so for many years, I can tell you the horror stories of pre-Online Store 2.0 development experience. It wasn’t pretty at all.

With the addition of “sections everywhere” to Shopify, and the ability to code-split your theme (if you wanted to spend that time) we could now create relatively fast Shopify themes. There was always 1 major problem though, how can we get the site to be reactive without an extreme amount of Javascript, or loading in a heavy library like jQuery? In comes AlpineJS, a wonderfully lightweight library with a plugin ecosystem to top it off.

I had considered using Preact, and have done so in the past, but I needed something quick and dirty, and to top it off, no build steps needed.

The first step is loading in the library, and while you can easily just use their CDN, I prefer to load the asset directly from Shopify’s CDN (I’m a glutton for performance).

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

// Or, download the file and put it into your asset dir in your Shopify theme
// Then load it like this:
<script src={{ 'alpine.js' | asset_url }} defer></script>

Bam, you now have a reactive theme. The code snippet on AlpineJS site does a good job showing how simple it is to start:

<div x-data="{ open: false }">
    <button @click="open = true">Expand</button>
 
    <span x-show="open">
        Content...
    </span>
</div>

Let’s break this down a bit though…

The x-data attribute allows us to set data that is accessible from within the div. So what about data you want to be accessible throughout the site, no matter if it’s a child or parent element? What about creating getters and setters that allow you to act and react on data using global functions? AlpineJS handles this as well with the fantastic Alpine.store() API.

I won’t show it here since their docs do a fantastic job, and trust me when I say their docs are super easy to ingest and if they don’t answer your question, then most likely a quick Google search will.

How did I implement AlpineJS into a Shopify theme that made sense and actually worked though. That’s easy (at least now, at the time it was super daunting). One thing to know about how Shopify themes are loaded is that they are server side rendered (SSR), this means the data is populated on the server, then you can manipulate it with your JS and CSS. This is such an advantage because we can use Shopify Liquid logic for most of the easy to complex tasks.

One of the main things to keep in mind when using Alpine with Shopify is to break things down into components, just like when developing with any other JS framework. You want to utilize the Alpine.store() the least amount possible, let the x-data attribute do most of the work when you can.

I will be posting snippets of implementations in other posts so I can get more into the nitty-gritty without making one insanely long post, I will update here when that happens.

Thanks!