"i only speak liquid" #61: "Micro Apps" using Metaobject and Serverless functions

Hey everyone!

Please welcome our newest writer: Jude 😊

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: Metaobjects are underrated

First, let me sing the praises of Shopify Metaobjects. They're one of the most useful recent additions to the Shopify ecosystem, and they're quickly becoming my secret weapon for developing cost-effective, flexible, custom solutions.

A Real-World Problem

A client came to me with a seemingly simple request: implement free gifts when the cart value reaches certain thresholds. Sounds straightforward, right? But here's the twist – they wanted multiple tiers (spend $100 get X, spend $200 get Y, and so on).

Shopify's built-in automatic discounts system wasn't up to the task. We reviewed what was availble in the App Store, but existing solutions all fell short for various reasons. It was time to get creative.

The "Micro App" Solution

This is where the magic of Metaobjects and Serverless functions comes into play. Here's how we crafted our solution:

• We created a new Metaobject definition to store the gift tiers. Simple and elegant – just three fields: Threshold Amount, Gift Product, and Tier Label.

• On application load, we query the gift tier Metaobjects using the Storefront API.

• After fetching the metaobjects, we use the cart total to calculate the current tier, next achievable tier, and remaining amount needed. In this case, it was a headless store built with React, so the tiers and calculated values were stored in shared state, and had an action to update whenever the cart was updated.

• We then added components to the cart page showcasing the current free gift (if applicable) and a progress bar indicating the spend remaining to achieve the next free gift tier. This was coupled with a "You may also like" section containing related products that were priced just above the remaining spend, which turned out to be a powerful combination for increasing average order value.

• When a customer selects the free gift, we set a metafield on the cart containing the chosen variant.

• When the customer proceeds to checkout, we hijack the checkout button and send a request to a serverless function. The function creates a draft order via the Admin API, adds the free gift (with 100% discount) alongside the other cart items, and redirects the customer to the returned “invoice URL” for a smooth checkout experience.

The Power of Micro Apps

What excites me most is how this approach opens up a world of possibilities. I've used similar techniques for a custom product bundles app, applying member “club” pricing discounts, creating custom product variants on-the-fly (e.g products with customisable dimensions) among many other customisations. 

In the past, these features would have required extensive development or pricey recurring app subscriptions (often involving trade-offs in functionality). Now, with the Metaobjects + Serverless functions combo, we can create these "micro apps" that do exactly what the client wants, efficiently and cost-effectively - I was able to put this particular one together in a couple of hours.

3 links you can’t miss:

1. Simple Made Easy by Rich Hickey This is my favourite ever talk on software development. I rewatch it at least once a year.

2. Butterick's Practical Typography If you want to level up your typography game, this is the best place to start, and if you're short on time, the five rules in "Typography in 10 minutes" and the "Summary of key rules" are really all you need to know for 99% of cases.

3. Interactive Guide to Flexbox - This is the best guide to flexbox I've seen.

1 app I like:

Rewind Backups

Having a regular and automated backup system is crucial for any software, but especially when it comes to e-commerce where mistakes can be extremely costly. Rewind backups allows you to restore images, descriptions, blogs, themes, orders, pages and more at the click of a button. Think of it like insurance. Ideally, you will never need to use it, but if/when you do, it could save your life.

One learning as a freelancer:

Communication is key. Your technical skills are only half the battle. If your technical skills are at a 10/10, but your ability to communicate is a 3/10, how will your clients perceive you?

The hard truth is, no matter how elegant your code is, if you can't effectively communicate with your clients, your overall value takes a massive hit. 

Here's why communication is so critical:

• It builds trust: Clear, consistent communication shows professionalism and reliability.

• It manages expectations: Properly explaining processes, timelines, and potential issues prevents misunderstandings.

• It showcases your value: Articulating the 'why' behind your decisions helps clients appreciate your expertise.

• It leads to better outcomes: Good communication often results in more precise project requirements and smoother collaborations.

Remember, to your client, you're not just a coder – you're a problem solver and a partner. Strive to be as strong in your communication skills as you are in your technical abilities. It's an investment that will pay dividends in client satisfaction, project success, and your professional growth.

Jude