Now that I’ve had a chance to digest some of the changes announced in Shopify’s Winter Editions 2023, I thought I would highlight some of the developer-focused announcements that excite me and my colleagues here at Gadget.

The top 3 announcements that get me excited about the future of Shopify app development are:

1. Sample store data
2. JavaScript for Functions
3. Cart Transform Functions API

Sample store data + mock.shop

Shopify now allows you to create development stores that include test data, such as products, customers, and orders. Finally! This is a small change, but one I really appreciate. I started out in the Shopify ecosystem less than a year ago and remember how overwhelming it seemed at times. At the very least, now you can roll out a development store that has been seeded with some sample data. This is a great addition for developers who are new to the Shopify ecosystem, and means I’ll never again need to make an empty “T-shirt” product in a new dev store!

Shopify also released mock.shop which provides an endpoint to fetch sample data along with a bunch of sample queries. Not to mention, a fun query generator that uses AI to generate a sample query based on natural text input: ask a question, get a query.

It handles Shopify-related queries well, other queries, not so much…

Built-in support for product bundles

When I started working in the Shopify ecosystem, I was amazed that product bundles were not supported by the Shopify platform out of the box! It might be difficult to find a store that doesn’t offer bundled products. With the Beta release of the Cart Transform Function API, Shopify is officially stepping into the bundle space. 

Shopify has a tutorial you can follow that includes an admin app with detailed instructions. The tutorial doesn’t require you to write any Rust code - the Cart Transform extension contains all the Rust needed to merge cart items into bundles. All you need to do to define and create product bundles is manage some metafield definitions and values.

My suggestion: build an app that adds the required metafield definitions on install and a nice admin app so merchants can put together product bundles without copy-pasting a bunch of metafield info and JSON templates. The Cart Transform API is still in beta, so now is the best time to develop your new bundle apps that use Functions and be the first mover into this exciting new slice of the Shopify ecosystem.

Looking for some inspiration? Gadget also has a product bundle tutorial that includes a working Shopify CLI app, uses a Product Discount Functions extension, and could be changed to use this updated Cart Transform API.

But wait, there’s more! The Cart Transform API wasn’t the only update to Shopify Functions, it is just one of 5 new Functions APIs that are now available for developers to use. Not to mention, the public release of Javascript Functions…

Functions in JavaScript and Javy

Shopify’s continued investment into Functions is so exciting that Functions content takes up half of the list!

Alongside the announcement of additional Functions APIs, Shopify also released a preview version of their JavaScript Functions implementation. Right now, Rust is the Shopify-approved language for writing Functions. But Rust can be tough to learn if you haven’t worked in a language that requires you to manage your own memory. Function boilerplate can look like this:

Wut?

Thankfully, Shopify heard the noise from the ecosystem and released a dev preview of their JavaScript implementation of Functions. Javy is the name of Shopify toolchain that allows developers to write Functions in Javascript and compile their code into a Wasm file. Support for JavaScript Functions is built right into the Shopify CLI and there is a good tutorial to follow that walks through the setup and testing of JavaScript Functions.

Other highlights include:

• Support for JavaScript and TypeScript
• A typegen command that takes your GraphQL input schema and generates typing for your function
• Performance metrics are included when running the preview command that is used to test your function and preview the output

Reminder: this is currently in developer preview! You cannot deploy Functions written in JavaScript. The compiled Wasm file is still too big for Shopify’s limits (because the entire JS runtime needs to be compiled into Wasm!) and JavaScript Functions do run slower than writing a Function in Rust or AssemblyScript, although they still run fast enough to easily fit under Shopify’s 5ms execution time limit. Despite these limitations, it’s worth taking a look through the JavaScript implementation of Functions and getting in early on this exciting new feature!

Looking to get into Function development but don’t know where to start? Check out Gadget’s Intro to Functions blog post. 

Other highlights (that I haven’t played with - yet)

I haven’t started building with Hydrogen2 yet, but building out an entire storefront (or maybe more excitingly, part of a storefront) using the Remix-based framework is something I want to try out. Building hybrid storefronts that use both headless Hydrogen frontends and Liquid allows developers to leverage all the built-in support provided by Shopify’s years of investment and development of Liquid, themes, and the existing app ecosystem while giving devs the flexibility to build complex parts of storefronts that may require “web app-like” functionality using Hydrogen.

Need a resource that Shopify doesn’t offer out of the box? Metaobjects allow you to define these additional resources right in Shopify. Think of metaobjects as more complex metafields that don’t need to be associated with an existing Shopify resource. With metaobjects, a JSON template can now be used to power storefront content such as defining the structure of an FAQ section for products or custom content for collection pages as detailed in Shopify’s Smash + Tess metaobjects case study. Metaobjects are a step towards a fully supported and integrated CMS within Shopify, something I am definitely keeping an eye on moving forward.

At the 2022 Unite conference, Shopify also mentioned that B2B APIs were coming soon. Well, they are finally here and it is worth learning the new APIs to figure out what kind of B2B opportunities have opened up in the Shopify space.

Wrap-up

This was just a quick overview of my favorite dev-focused features that Shopify announced as part of their 2023 Winter Editions. For a full overview of the 2023 Editions announcement, check out the Editions Hub.

Want to build public or custom Shopify apps without the boilerplate? Check out Gadget, try one of our tutorials, and get started on Shopify app development faster today!