Developer updates in the Summer ’24 Edition — this one's a game changer

This Summer ’24 Edition, we're unifying infrastructure, reducing redundancy and friction, and tightly integrating our platform. These changes equip you, our developer community, with new features and tools that work harder and faster.

Making headless more efficient

Shopify is heavily invested in tools that make the on-ramp to headless development even easier — from Hydrogen and Oxygen, to metafields and metaobjects, to steady investments into our Storefront API. Now, we’re integrating Utopia, an open-sourced visual design tool, into Hydrogen. 

Hydrogen visual editor, powered by Utopia

We’re longtime supporters of open source projects that push the web and commerce forward. This includes contributing to Ruby, Rails, and React Native, among other projects. We acquired Utopia in 2022 to further our investment in the open source community. Now it's powering our latest offering: Hydrogen Visual Editor. This tool provides a visual WYSIWYG editor for headless storefronts, bringing non-technical users into the editing flow and maximizing developer resources.

With this new tool, you can stay in control of your builds as your code is always the source of truth. All changes sync to Github, with small and straightforward diffs. This means you can easily implement a custom interface your non-technical internal teams can use for simple copy and content changes and templated page builds.

Even better, because it’s code, you can continue using all your existing tools — like VScode, Github, CI/CD — while merging branches and tagging releases to ship faster. We've also simplified the process of integrating data into your pages, whether it's from metaobjects, our Storefront API, or your CMS. Plus, you can use Oxygen to deploy instant previews. 

Shopify now offers the best of both worlds between Liquid Themes and headless storefronts, with powerful visual editors for both. No other commerce platform offers all this functionality in one place. The Hydrogen Visual Editor, powered by Utopia, will enter early access soon. In the meantime, you can view a demo below.

Equipping developers with new features to build integrated experiences

Our merchants rely on developers like you to build intuitive solutions for their unique needs. We arm you with the tools to make that happen.

Admin extensions

The new admin Print Extension enables frictionless and consistent order fulfillment tasks for merchants, such as printing invoices or packing slips, without having to navigate away from the current page. Simply configure the extension and we’ll turn it into a printable asset by leveraging native browser capabilities. This extension is available today as part of the shopify app generate extension command. It leverages the same familiar components as our Action and Block admin extensions.

Action and Block extensions are now available across virtually all resources within the admin. Since launching this year, nearly 1,000 apps use them to create seamless, integrated merchant experiences. These extensions let merchants combine app data and interactivity, enabling integrated workflows without leaving pages like products, orders, and customers.

Shopify Flow

We’re also introducing the Flow template app extension, enabling you to attach an automation to your app. This provides merchants with a simpler way to discover what your app can do. It also makes it easier to build the most common automations you’d expect your app’s users to need. 

Flow templates can use the full power of Flow. This includes the recently released Send Admin API request to mutate any resource on the Shopify platform, and the Run Code action. After the app is deployed, Shopify will review the templates and, once approved, surface them in the Flow template library. 

The Flow template app extension is available as part of the Shopify CLI through the shopify app generate extension command.

Shopify Functions 

Shopify Functions are getting more powerful with improvements to JSON parsing for JavaScript and a smaller Rust footprint. We’ve also made improvements to how function batches are executed for increased performance. Each of these changes enable you to get more done with Shopify Functions, making it possible to tailor checkout to buyers’ unique needs. 

Unifying our developer platform

The Shopify developer platform makes it easy for you to leverage what you already know. As you build on Shopify, you’ll be able to transfer skills across different parts of the platform.

Shopify CLI

The latest version of the Shopify CLI provides a single command-line tool to build apps, themes, and Hydrogen storefronts. As you learn CLI commands such as “shopify app dev,” you will experience a similar command structure for themes and Hydrogen, reducing cognitive load. 

Additionally, the majority of extension building now happens through the CLI, which now includes payment extensions. As you’re building functions, you can see all the logging information integrated as a part of the shopify app dev command, all within a familiar terminal and coding environment. 

GraphQL

We’re unifying APIs across our platform with GraphQL. In fact, our recently expanded 2,000 product variant limits are only available via GraphQL.

On the Admin API, almost all of what exists on REST is now available on GraphQL. New patterns, such as totalCount, enable you to easily obtain key information about customers, orders, and products. We’ve also improved the learning experience with more accurate references and GraphiQL integration (coming soon).

Reducing friction and improving efficiency

We’re reducing friction in the app development process to address challenges that slow you down. 

Shopify-managed scopes and webhooks

Earlier this year, we released declarative scopes and managed installs, improving authentication and reducing app install time for merchants. Apps that leverage declarative scopes take 80% less time for authorization during installation (a median of under 500 milliseconds compared to over 2 seconds).

We’re now introducing Shopify-managed webhooks that make subscribing to them as simple as adding a few configuration fields on the shopify.app.toml. Newly released filters and improved includeFields enable developers to customize when they receive webhooks. After configuring your webhooks, you can deploy them to all shops using your app via shopify app deploy. Shopify will take care of everything related to delivering events.

All the declarative capabilities make the config your source of truth so that they can easily be stored as part of your code repository. This allows you to use a git-centric workflow to make and test app configuration changes.

.dev assistant

.dev assistant is a new AI-powered tool on Shopify.dev focused on helping you easily learn and use Shopify’s GraphQL Admin APIs. With a simple natural language instruction, the tool can produce fully usable GraphQL queries and mutations. This dramatically reduces build time. The tool will eventually incorporate additional use cases relevant for Shopify app and theme developers. 

Managed app pricing

Managed app pricing is yet another way Shopify is reducing friction throughout all aspects of app building. Rather than having to build and maintain an end-to-end experience for app pricing, you can now accomplish it in a few clicks. This provides merchants with a familiar interface for making a buying decision on your app, which helps improve conversion.

Summer ’24 Edition brings big changes to our developer offerings that will help you build better, faster solutions to unify commerce. Learn more about what we’re working on for you.