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.
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).
Bam, you now have a reactive theme. The code snippet on AlpineJS site does a good job showing how simple it is to start:
Let’s break this down a bit though…
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
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.