Skip to content
At Shopify Unite 2021, the team announced the largest set of platform investments that give merchants and developers more power to create, customize and monetize on Shopify. According to Shopify’s CEO Tobi Lütke, the 3 guiding principles behind what they have been doing are:
- Make commerce creative
- Make the important easy
- Make everything else possible
The key updates include the launch of Online Store 2.0, improvements to its headless commerce APIs, as well as new functionality for Shopify checkout pages. Today, we are going to cover the major points that you need to know and see what to expect.
Online Store 2.0
According to Shopify, this is the biggest and boldest upgrade to the Liquid Platform ever. It will feature greater levels of flexibility and customization so store managers can better showcase their brands, create enjoyable online experiences, and integrate apps - all without code.
A Tough Time for Page Builders Apps
Thanks to the rebuild of templating language, Shopify now has an editor that is similar to Wordpress’s Gutenberg, or the page editors in Wix and Squarespace. In other words, this new version will bring sections to all pages on a website, not just the homepage. Thus, ‘Sections Everywhere’ unlocks a range of new chances to personalize every aspect of the store.
The new online editor will make it possible for SMBs to create new page templates and populate them with data on the fly. Previously, if store owners wished to have a different layout for their product pages, they had to duplicate the existing template so they could edit them independently.
However, each page type can now be rendered using a JSON template file that lists the sections of that page, and stores settings data. Stores can have multiple template files that map to various products, collection pages, custom pages, blog posts, and other pages in the same store.
Unfortunately, the upgraded editor will be an enormous challenge to page builder apps like PageFly or Shogun because merchants do not need a third-party solution to build complex pages. So the question is, will this upgrade replace these insanely popular apps on Shopify marketplaces?
Theme Apps Extension
Another notable feature of Online Store 2.0 is the app installation and deletion. Many apps require store owners to meddle with theme code to fully install or remove them, which is a real pain if developers name files differently. To solve these challenges, Shopify introduced Theme App Extensions, allowing developers to extend their apps into merchants’ themes via app blocks.
A preview of Theme Apps Extension. (Source: Shopify)
Now when store managers edit their product pages, there will be sections to choose from the apps they have installed. Let's take product reviews as an example. Instead of adding code to the template, merchants just need to pick a section, and then insert the star rating badge right in the theme editor.
Netflix’s merchandise store is the first eCommerce store to use Online Store 2.0 features, which support app blocks and sections on every single page. (Source: Netflix Shop)
To make apps compatible with Online Store 2.0, app developers should focus on building UI components so that merchants can add, remove, and configure directly through the theme editor without editing the theme’s code. However, for apps that do not have a UI component, for instance, chat bubble and product image badge apps, developers had better go with app embed blocks.
Also, merchants will increasingly adopt Online Store 2.0 themes, so apps without the theme app extensions will not be able to integrate with Online Store 2.0 themes. Likewise, if these apps are slow to update their products according to Shopify, it will cause a poor experience for store managers, negatively affecting users’ retention and the store’s ability to attract new customers.
For more detailed information, please refer to Theme Apps Extension Framework.
An Open Door for the Theme Market
It is widely known that the theme market on Shopify has been idle for the past few years, redirecting talented developers to the apps and service markets instead. Shopify merchants either keep circulating the old Shopify themes or look for risky alternatives from different places. While the former option quickly bores merchants, the latter leads to their seemingly never-ending struggle with the code clash between themes and apps.
Shopify apparently has paid attention to this issue, and their year-long silence to the matter has come to an end with this Shopify Unite.
As of 15 July, Shopify Theme Store will be open for new theme submissions. They also introduce Dawn, the first open-source theme that has Online Store 2.0 features. Created with speed and flexibility in mind, Dawn will be a new standard for Shopify theme development. Together, these updates give theme developers much scope of creativity.
To take full advantage of these improvements, partners should plan to migrate their themes and apps to the updated requirements of Online Store 2.0 as soon as possible - especially as merchants come to expect the flexibility OS 2.0 provides. By the end of the year, it will be required that all themes in the Shopify Theme Store and apps in the Shopify App Store use the new infrastructure. To build your first theme app extensions and make your apps compatible with Online Store 2.0, you can visit the migration information in Shopify documentation.
More Customizable Metafields
Another major announcement is, merchants now can create and edit metafields directly in the Shopify admin, and they will no longer need third-party apps to do so. To the metafields app on the marketplace, this is definitely not great news.
If you’re wondering what metafields are, they are additional fields that store information about products, pages, and collections. Thanks to Online Store 2.0, store owners do not need to work with a developer or install another app to add extra information like dimensions, a size chart, or ingredients.
Online Store 2.0: Metafields demo (Source ShopifyDevs)
From within the settings panel, merchants can now create a new meta field definition using a new set of types. Shopify will add new types such as colors and URLs. Store owners can also add validation and descriptions so they can ensure that whatever is being entered is in the right format. Then, they insert new meta field definitions to their products within the product pages whenever they enter product information.
In general, this ability to add new attributes to products changes the way of storing data inside of Shopify, so now merchants can host data of any format inside of one platform. Plus, Shopify is working on this metafields infrastructure not only to let store managers extend Shopify models but to also power a new content management platform. It will allow merchants to store the content of any format within Shopify using metafields. To be more specific, they will be able to create content once and publish it to all of their channels, including the online store. As this content is already in Shopify, it can be easily connected to other parts of the platform.
Customize The Checkout Page with Checkout App Extensions
There is no commerce without checkout, right?
Until now, if merchants are not on Shopify Plus, they can’t edit the checkout page - only add their logo and change some colors. However, Shopify will make it possible to extend checkout with apps, so developers can build exactly what merchants need - from simple changes to the look and feel, using the new capabilities, including UI extensions, an overhaul of scripts, and a new payment platform. Hence, this change will bring a lot of new Shopify subscriptions apps to the marketplace, and the competition has a way of making everyone step up their game.
From a glance, using checkout app extensions will allow developers to:
- Add new personalized content, for example, custom messages, interactive offers (upselling) to the post-purchase page.
- Personalize checkout options such as shipping and payment methods, including a buy now, pay later option.
- Capture additional details from the buyer in checkout.
- Validate information input by buyers.
- Create custom promotions.
Checkout extensions use a new technology called App Bridge Checkout that allows Shopify to take the code, host it on Shopify’s CDN, and run it securely within a Web Worker sandbox in the browser. Custom checkout experiences built through checkout extensions will work smoothly with accelerated checkouts like Shop Pay, so merchants can still leverage the increased conversions that come with faster checkouts.
In addition, Scripts are now deployed and installed via apps. This means that Scripts can now be installed on multiple stores, and merchants can use them without touching code. Last, Shopify’s new payments platform will replace its legacy integration points and enable developers to create payment gateways like Shopify apps. The payment platform is optimized to work with Shopify’s new checkout technology stack and gives developers a single path to integrate with Shopify.
Zero Percent Revenue Share Model
There is no doubt that these new updates will offer Shopify merchants more control over their online stores with a better user experience. To app developers, these latest features and tools are a reset button in this competitive game. They will bring the theme builders and subscription apps an exciting opportunity to develop creativity, but we also have to foresee the elimination of various Shopify apps. Therefore, to attract and support new developers and partners, the company will offer zero percent revenue share on the first million dollars developers make annually on the Shopify App Store.
- Developers who build for the Shopify App Store will now pay a 0% revenue share for the first $1M they earn annually on the platform starting on August 1, 2021. The $1M benchmark resets annually.
- The same 0% revenue share model will also be available to Theme Store developers.
- Starting August 1, 2021, at 10:00 a.m. PST, app developers can register for a reduced revenue share plan for apps sold through the Shopify App Store.
However, if apps generate over $1 million, developers must pay a 15% revenue share, lower than the previous 20%.
Improvements to App Development
As commerce becomes increasingly complicated, merchants and developers need creative technical solutions to grow businesses. Hence, Shopify has launched new updates and changes to take advantage of the opportunities.
Improve Development Workflow
Shopify has revamped its developer documentation to focus on the outcomes merchants want to achieve, making finding the information developers need easier.
The new look of Shopify’s developer documentation. (Souce: Shopify Developers Platform)
With the new interface, Shopify has improved readability with changes to typography, layout, and multi-programming language blocks in tutorials to make them easier to understand. They have provided easy copy-and-paste snippets in their references to help you move faster.
Moreover, to help improve the process of developing app extensions, Shopify is introducing the Developer Console, where developers can build and test extensions in an actual store environment. If they want to test App Bridge Admin extensions on true stores, they must push the extension to Shopify’s CDN. However, Developer Console can provide a faster and more realistic experience when building and testing App Bridge Admin extensions.
To improve the app extension development process, Shopify introduced the Developer Console, where developers build and test extensions in an actual store environment. (Source: Shopify Developers Platform)
Any changes to the local environment will render immediately, so developers do not need to publish their app to view their modifications. Also, they can ensure the extension will cause appropriately in both desktop and mobile environments via a QR code. The Developer Console is now available in development stores; please visit this documentation for more details.
Google Cloud Pub/Sub, a messaging service for exchanging data among applications and services, is now available to developers as an easier way to manage webhook events. Integrating apps with Google Cloud Pub/Sub allows apps to consume events at their own pace and handle large volumes of webhook traffic. This also means that developers will no longer have to build and host API and queue systems to receive webhooks.
Learn more about managing webhook events with Google Cloud Pub/Sub here.
Enhance App Discoverability
The Shopify team is improving the Shopify App Store to help app partners better connect with merchants and grow their apps, which will boost app discovery. Using data and insights from merchants, they can identify what merchants need at what time.
An example of the new personalized app store. (Source: Shopify)
These insights inform Shopify’s new personalized App Store homepage, with new content types, improved taxonomy, more informative app category pages, and a modular approach. According to Shopify, these improvements are to take care of organic discovery so developers can focus on building apps.
Shopify also announced that they are expanding the capability of Shopify App Store ads by introducing awareness ads. Search ads will now be called conversion ads. While conversion ads help merchants who already have a specific need in mind, awareness ads will inform them of potentials they have yet to discover.
An example of awareness ads is on the Shopify App Store. (Source: Shopify)
The new advertising space will help save money and avoid wasted eyeballs while ensuring a trusted homepage experience so merchants can feel good about installing these apps. Besides, awareness ads provide more creative format control by choosing the ad-block color to match the brand.
Managing Billing and Payouts
The new Charge overview page in the Partner Dashboard makes it easier to view app subscription charges, so developers can better manage the billing and payouts and even resolve refund requests directly. This update will make it easier to understand how Shopify merchants experience charges and see how much app partners can expect to be paid.
The look of the new Charge overview page. (Source: Shopify)
In addition to Paypal, Shopify will soon enable payment in different forms, including local bank transfers, wire transfers, and other methods. Furthermore, Shopify will support receiving payouts in over 200 regions and countries with the best exchange rates possible.
Updates to the Storefront API
Thanks to a new @inContext GraphQL directive, merchants can now build custom storefronts using Shopify’s Storefront API that will unlock more commerce capabilities, for example, international pricing for global consumers, curbside pickups, and subscription selling plans. Creating non-Liquid custom storefronts with the existing developer framework will help merchants explore creative ways to engage with consumers across websites, mobile apps, video games, and intelligent devices.
International Pricing
(Source: Shopify)
Now Shopify merchants can determine international pricing by the shopper’s shipping address. They control international pricing on a storefront by setting different product prices and price adjustments for other countries and regions.
To learn how to query international prices for products and orders, refer to Support international pricing on storefronts.
Filtering
The Storefront API helps filter products in a collection based on product type, vendor, variant options, price, and stock status. This functionality builds the desired customer experience on a storefront, for instance, the ability to narrow down search results that merchants display to customers.
A filter tree that contains all filter options. (Source: Boost Commerce)
It can be implemented on: collection pages, search result pages, and sometimes home pages. However, filtering products by meta fields, range sliders, and geo-location is still impossible. Also, Shopify displays a Default filter for all messengers instead of supporting customizable filter trees. Consequently, if store owners want to create a custom filter tree and apply it to a specific collection, they must install a product filter & search app.
Local Pickup
You understand how challenging fulfillment is if you handle inventory across multiple locations. Fortunately, business owners can level up their local pickup experience by designating pickup-only areas. Once they have the ID of the preferred location, they can use the @inContext GraphQL directive to query for product availability at that location.
This is a local pickup example. Shopify merchants can display whether a product is in stock and available for local pickup using the Storefront API. Therefore, customers can pick up their online orders at a retail store, a curbside pickup location, or any location a merchant chooses. (Source: Shopify Developers Platform)
This is good news for all Shopify stores, especially SMBs, who need help paying for packaging and third-party shipping solutions to offer fast shipping.
Introducing Hydrogen
CEO of Shopify, Tobi Lütke and the Hydrogen Snowboard. (Source: Shopify Unite 2021)
Shopify also introduced Hydrogen, a developer toolkit and a React framework that solves the complexities of custom storefronts’ needs. Overall, this brings in faster storefront building, with more focus on the UI to make the brand stand out. Thus, it will help developers build unique commerce websites to fit the brand in a few clicks.
Along with Hydrogen, Shopify users also get Oxygen, the best way to host Hydrogen storefronts directly into Shopify – it is fast and serves globally. It is optimized for all kinds of commerce. Their product team is still working on these new products, so it is still early for Hydrogen.
What is Your Favorite Moment?
Shopify Unite 2021 has brought us surprises with significant updates and new features.
Which one is your favorite after reading through significant highlights? How will their new products and features impact you as app developers and business owners?
Please share your thoughts on our Facebook, Twitter, and LinkedIn now.
