How to create components in Shopify using Alpine.js

What I’ve been thinking about:

As a Shopify developer you regularly find yourself working on pre-existing themes that are either pre-bought or custom made, often with Javascript that has been compiled before deployment. This can make it hard to understand or customize safely.

In recent times I’ve become increasingly interested in componentizing my Shopify work. For example, so that a custom section I add to a theme is not reliant on anything outside of itself.

This could, of course, be achieved using Section assets, but when using Javascript in particular this can be risky as you can inadvertently apply some code that could interfere with functions used elsewhere in the theme causing bugs and potential headaches once deployed.

I was recently introduced to Alpine.js which is “a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going.” Now on first seeing this I balked slightly, I’ve spent the last 5 years of my career in a wholehearted commitment to working with vanilla JS as much as possible and of removing jQuery from my toolkit so to consider using something compared to it was troubling to say the least.

However, it is lightweight, easy to use and best of all when using it, the code you add applies only to that component and items referenced by it and nothing else. As a result you can interact with an existing theme with as little intrusion as possible. Simply add x-data to the containing element of your component and go from there.

To give you an idea of how Alpine can be used I’ve put together a very simple demo which sees a free product applied to a form once a certain quantity has been added to the shopping cart. Find where to view this demo in the link section below.

This incorporates an incredibly handy and sparsely documented feature of Shopify.. Adding the below code to a product form, with the variant id set as an actual id from the inventory of the store you are working on, will see it added to the cart alongside the product you are purchasing when you submit the form.

This opens up a simple, no-app solution to options such as adding free gifts, promo products or even product bundles to an order. Thanks to Rob Dukarski, a fellow Storetasker, who mentioned this on the Experts Slack channel.

I myself used it recently to add a complimentary tote bag to an order when a certain product was purchased. In this instance the corresponding product uses a custom product metafield so that you can select a ‘Free Gift’ product to link to the main product. Then in the product template if that metafield is set, the variant.id of the free gift is automatically added to the hidden input field.

There are a multitude of ways in which this simple feature can be used to make custom solutions for your clients requirements and Alpine.js gives you an array of options that can be streamlined into your working process quickly and easily.

As I’ve started to incorporate Alpine into my work I found that one of its greatest strengths is when, say, building a custom section for a theme you can simply copy and paste that section to a different theme and it will work as expected, opening up the opportunity to create yourself a component library that you can use across all of your future Shopify work.

3 links you can’t miss:

• Alpine.js / Free Gift input Demo - A demo that I’ve put together to illustrate a simple way to use the features mentioned above. Be aware this is not intended as a plug and play example, more as a basic, rough introduction to some basic Alpine features. Read the comments in the source code for details.
• Stortasker Rob Dukarski - I mentioned Rob earlier; follow him on his LinkedIn account or you will regularly see him on the Storetasker Experts Slack channel. His advice and insight has been of great help in recent times. Thanks Rob!
• The Baymard Institute - Ever wondered if the way your site is designed is helping with conversion rates, or looking for ways to improve your layout using rigorously tested best in class functionality examples to compare it to? Then, this is a good place to visit.