"Coding commerce. Together."
This was the tagline for this year's Shopify's annual partner and developer conference, Unite. While last year's event's main target were merchants, who needed a platform to quickly get their store up and running to sell their products online while their physical stores were closed, this edition placed a strong focus on developers and the partners' ecosystem, announcing "groundbreaking changes to the infrastructure, the tooling and the technologies that empower them to build on Shopify".
Because, in the words of Tobi Lütke, the CEO of Shopify, the key to Shopify's success has been the combination of forces between Shopify's infrastructure and the ecosystem of partners, designers, app developers who build on top of that infrastructure.
All with a common goal: to make commerce better for everyone.
Here at Nama, we found Unite 2021 a really exciting event. Both for the size and impact of the announcements, as well as for the feeling of community it reignited within the Shopify ecosystem. Alongside the conference, Shopify setup a Discord channel where Shopify partners and developers could network and exchange ideas about the new features, ask Shopify staff members questions on the presentations, and could join an "ask me anything" session with Tobi Lütke.
As we already mentioned, many groundbreaking changes were announced during Unite. Here is a brief recap of what Shopify has in the pipeline, divided into four macro-topics:
- Online Store 2.0
- Shopify checkout
- Improvements to app development and incentives for app developers
- Custom storefronts (Storefront API e Hydrogen)
If you want to read more about the new features in detail, you can check out this blog post by Shopify.
Online Store 2.0
Presenting it as "the biggest and boldest upgrade" they have ever shipped to the online store, Shopify has rebuilt the online store experience from the ground up. They call it Online Store 2.0.
Theme architecture
They have upgraded the theme architecture, making it modular and therefore making the theme structure very similar to a series of lego blocks, that can be added, removed and moved within the pages. The new architecture is achieved by rendering pages using JSON templates instead of Liquid templates. Each JSON template lists the sections on the page, as well as external apps, which will also interact with themes as removable blocks. Merchants have then the ability to move the position of sections and apps in the page, as well as creating different templates directly from the theme editor, without the need of custom code. The JSON template will automatically be updated when it's modified through the theme editor.
La nuova architettura esegue il rendering delle pagine tramite template JSON invece che con template Liquid. Ogni template JSON contiene un oggetto che elenca le sezioni che compongono la pagina e i loro blocchi di contenuto. Anche le app esterne si comporteranno come sezioni e interagiranno con il tema tramite quelle che vengono chiamate App Extensions. Potranno essere aggiunte direttamente dal CMS e non lasceranno nessun residuo di codice quando rimosse.
{
"sections": {
"main": {
"type": "main-page",
"settings": {
}
},
"1629360536d4f55a97": {
"type": "image-with-text",
"blocks": {
"1629360536d4f55a97-0": {
"type": "heading",
"settings": {
"heading": "Image with text"
}
},
"1629360536d4f55a97-1": {
"type": "text",
"settings": {
"text": "<p>Pair text with an image.<\\/p>"
}
}
},
"block_order": [
"1629360536d4f55a97-0",
"1629360536d4f55a97-1"
],
"settings": {
"height": "adapt",
"color_scheme": "background-1",
"layout": "image_first"
}
}
},
"order": [
"main",
"1629360536d4f55a97"
]
}
This new architecture addresses two of the main issues that Shopify themes had in the past: not enough flexibility for customization from the merchant (apart from the homepage) and ensuring that theme performance is not negatively impacted by third party code and custom page/product/collection templates.
Store content
Alongside the Online Store 2.0, another big update concerns metafields, which can now be defined and edited directly from the admin, and then selected as data source and connected to a specific section from the theme editor. So if you wanted to add a section to the product page where you display the washing instructions, you could use a metafield that you defined within Shopify to do this. And the value will be different for each one of your products.
One live store that is already adopting all the features from the Online Store 2.0 is Netflix.
Dawn, developer tools and new best practices
All of the new features of the Online Store 2.0, like sections, templates and metafields, can be found in the first open source theme made by Shopify, Dawn [github repository here]. This theme is pre-installed in any new development store created after July 1st, replacing Debut as default theme. It loads 35% faster than Debut and it uses JavaScript only when necessary, so it relies mostly on native browser features instead of JS libraries and polyfills. It has been presented by Shopify as the new reference on how to build fast e-commerce themes for modern browsers.
Additionally to Dawn, developers have been empowered with new developer tools:
-
Shopify CLI
The existing Shopify CLI has been expanded to work with theme development and new commands, a linter for themes and hot-reload of CSS and Liquid have been introduced. -
Git integration for theme development
This allows developers to pull changes to the theme continuously and to implement workflows to deploy themes directly from Github. -
Restyled documentation
with additional checklists for themes development best practices.
The theme store has also reopened to new submissions after 3 years, and we are now starting to see Online Store 2.0 themes available.
Shopify checkout
Many checkout improvements are currently in beta testing and will be released towards the end of 2021. They can be divided into three main areas: checkout extensions, changes to Shopify Scripts, and a new payments platform.
Checkout extensions
Currently, small changes to checkout are only possible through the theme customizer, while bigger changes can be done for Shopify Plus stores through the checkout.liquid file.
Checkout extensions, a set of extension points, API endpoints, and UI components, will allow developers to integrate Shopify apps directly within the checkout, without running the risk of hacking the checkout.liquid file. These will also be compatible accelerated checkouts like Shop Pay.
This feature is still in development, but Shopify has opened beta access to the first checkout extension, the post-purchase app extension.
Shopify Scripts
Only Plus stores have access to Shopify scripts, which allow the creation of custom backend logic directly from the Shopify admin. For example, with Shopify scripts, you can reorder payment gateways on your store. Still in beta testing, the new version will improve reliability, speed and allow developers to build scripts using their preferred local development workflow. Furthermore, Scripts will now be deployed and installed via apps, so they can be reused and installed on multiple stores.
Payment platform
Especially in relation to payment gateways, Shopify is relying on developers around the world to keep up with the number of payment methods available worldwide. Developers will soon be able to create payment gateways as Shopify apps rather than the legacy integration points, Active Merchant and Hosted Payment SDK. The new payments platform will be available to developers later in 2021.
Improvements to app development
E-commerce now represents 20% of global commerce, and it is pushed forward by merchants all over the world. The demand for e-commerce developers and custom solutions to merchants' business needs is really high. With this in mind, Shopify has worked on making it easier for developers around the world to take advance of these opportunities. One of the biggest announcements specific for app developers was that "as of August 1, 2021, we’re offering zero percent revenue share on the first million dollars you make annually on the Shopify App Store".
Shopify is betting a lot on the developers in the ecosystem and in the products they will build to respond to the evolving merchant needs. Shopify provides the infrastructure and the right tools to build a thriving app business, and the rest is up to developers' skills and imagination. Some updates to improve the app development workflow have been released: better documentation with improved readability, an updated developer console to help with the creation of app extensions, which are now required for apps to interact with themes, and Google Cloud Pub/Sub to improve interaction with webhooks.
A new matching and recommendation algorithm has been introduced in the app store and in the Shopify admin, to improve discoverability of apps and more powerful ads are available to those companies that want to promote their apps.
Storefront API updates
Storefront API
Storefront API is what is used to create shopping experiences that are not done through the Online Store or Shopify POS. Take the example of ComplexCon, a live festival for streetwear enthusiasts that is held every year in Long Beach. In 2020, it replaced its in-person event with an online gaming platform where the guests could attend concerts, purchase exclusive products and order from local restaurants. All powered by the Shopify storefront API, which can access product information, create orders and check out purchases.
The Shopify Storefront GraphQL API as of July picked up 1 million queries per minute, so one of the goals for this year is to bring the GraphQL engine to every major geographical region and the Shopify capabilities within 50 milliseconds from every buyer. Another one is to add new endpoints to unleash the developers' creativity: some of the announcements were related to the new @inContext GraphQL directive, international pricing API, selling plans API, local pickup and much more. There is also an upcoming update to the Storefront API schema, which can be previewed here.
Hydrogen
The Storefront API is the source where product data and orders are stored. However, there is a lot of work going into building the front end that the end user will interact with. Hydrogen is Shopify's answer to this question and it provides a quick-start toolkit and a set of components to hit the ground running. It is built on JavaScript and React. It was really fun watching Tobi taking Hydrogen for a spin during Unite and give us a sneak peak of how it works by adding a color swatch to the product page of his snowboard store, as well as a 3D model of the product that interacts with the variant options. During the demo he also mentioned Oxygen, which is a way to host Hydrogen storefronts directly on Shopify. Both Hydrogen and Oxygen will be available at the same time and they are hoping to release them by the end of this year. You can catch the full video here and sign up for alerts on the release of Hydrogen at the bottom of that same page..
It's important to note that Hydrogen will be available alongside the traditional way to build themes, Liquid. They expect the majority of stores to still run with Liquid, but they are happy to give developers the possibility to choose which tool they prefer.
Thoughts on Unite 2021
As you just read, this year's Unite was full of announcements and sources of inspiration. Shopify is empowering developers with the best possible set of tools and documentation to work on Shopify products, since Shopify's success is also partly driven by its ecosystem of developers, designers and partners.
Developers will need now some time to digest the new features and learn how to build with and on top of them in the best way possible. It was very inspirational to see the Shopify CEO coding in front of all the conference attendees and listen to him talk about what it means to shape the future of e-commerce TOGETHER - and we're so looking forward to doing so.
If you'd like to discuss the new features and opportunities that come with Shopify's latest announcements, we at Nama are always happy to have a chat. Write to us at info@namastudio.it!
