"i only speak liquid" #20: The One with Actual Code in it 🧑‍💻

Hey all 👋!

Welcome to 'i_only_speak_liquid' by Storetasker, where active Shopify developers like me (Mark) share learnings we face daily. 

This is my last edition, it’s been a real treat to sit and think on the subjects that I’ve discussed here and I hope that you’ve found something of interest in these missives. 

Up to this point I have written three newsletters about web development that have mentioned very little code. I thought I might change that for this week.

PS: I'm a developer on Storetasker; Apply here if you want to join Storetasker's gated network of vetted Shopify developers. 

This newsletter is sponsored by Shop Quiz by RevenueHunt, the #1 product recommendation quiz app for Shopify. Shop Quiz helps customers find the right products for them, boosting sales and improving the shopping experience.

Want to earn passive income while helping your clients grow? RevenueHunt has a Partner Program for Shopify Developers, which rewards you with a 20% lifetime commission for every new client you refer

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.

One app I like:

App Required?/App Audit: 

As this is my last edition of the newsletter I promised myself that I would make my final app recommendation more a suggestion than a direct recommendation. That being; can the task be done without an app. On a recent app audit for a client we discovered they had installed apps over the years that were either not required or sometimes not even implemented, but yet the injected code from those apps was still being called on every visit to that site to the detriment of the user experience.

Improvements in the Shopify API and the addition of metafields/metaobjects content means that there is so much more that Shopify can offer without the use of third party apps. Question whether an app is required and remove those that aren’t, you will save your client money and increase their site speed with comparative ease.

One learning as a freelancer:

This last month I was lucky enough to work on the relaunch of the PerfectTed website, they make Matcha based energy drinks and wanted to rebuild their website in time for their appearance on Dragons’ Den (the UK version of ‘Shark Tank’) which was broadcast 2 weeks ago.

I was introduced to them via Storetasker and it’s been a privilege to work with a company as their public profile has been given a sudden and significant increase. Watching the Live View of their store admin as the show was broadcast was extraordinary as traffic and, most importantly sales, started to flood in. In amongst this deluge of visitors and interaction it was noticeable that Shopify didn’t even blink; at no point did their servers struggle with the visitor spike.

Asides from the reminder that appearing on television is still a massive promotional boost (the week after their appearance the company had a 42,000% sales increase), the whole experience was a perfect summation of one of the truisms I’ve encountered as a freelancer; that the best jobs you will work on come from a mixture of your expertise, the quality of the relationship with your client and sheer luck and happenstance.

Sometimes an opportunity will present itself to you unexpectedly and if I can make any recommendation to fellow developers it is to trust your instincts when they arise and if the opportunity feels right to commit to it fully.

As mentioned, this is my last edition of "i only speak liquid" - thanks so much for reading!

Cheers

Mark