Last week was one of the biggest events of the year on our calendar - Shopify Unite. The focus of the event was very much on developers; looking at new tools and improvements that will make it even easier for talented Shopify devs to do what they do best for merchants. So while we covered what announcements merchants should know about in our previous article, today we’re handing things over to our Dev team to find out what announcements they’re most excited about.
Anna Gallo, one of our amazing Developers, took the lead on compiling the dev team’s thoughts on Unite. Take it away, Anna!
Online Store 2.0
Theme Editor
Shopify announced a complete overhaul of their theme editor. A major update is that sections will be available on every page of a merchant’s site, allowing for greater customization and flexibility.
Key points:
- Themes are modular and we now have sections everywhere!
- All Liquid code is entirely in sections
- JSON is in templates
- Template picker is front and centre; users can select templates but also create new ones from the editor.
What this changes for us
Our code is about to get a whole lot cleaner. This commitment to modularity sets us up for really limitless possibilities with extension and reuse, and also helps us empower merchants to have more ownership over their site design and user experience.
While template selectors were previously relegated to the content area of the admin, they're now front and center in the editor; a win for merchants and developers alike. Every dev has had the experience of a client wanting a template "just like this other one we have, except for one difference," and has gone straight to their IDE to make it happen. Requests like this can now reasonably be attempted by clients, and swiftly accomplished by developers when additional support is needed.
Metafields
Up till this announcement, custom metafields were restricted and difficult to access without the use of a third party app. The ability to create and manage these will soon be available directly in Shopify Admin.
Key points:
- Metafields can be defined and edited directly in the editor
- Metafields can be bound from directly in editor
- Ability to create custom content types with metafields
- Gives you ability to easily create custom types and templates for products (one for shoes, one for bags, etc.), as well as collections
What this changes for us
Shopify will soon natively support many of the metafield capabilities for which we previously depended on apps. Being able to access metafields from the same admin interface where we're making product or collection changes is also a huge time saver and will help us foster greater transparency in the data work we do for merchants.
The ability to bind metafields from within the editor is also a major upgrade. While we previously were made to hard code metafield names into our source, we’ll now have the ability to quickly change them from a GUI - and allow merchants to do the same.
Custom content types are an additional stride in making Shopify a less "opinionated" platform. Merchants will no longer be constrained by the content types Shopify chooses to provide - products, pages, blogs, collections, etc. We're imagining a world where promotions, for example, are their own intentional content types and not just a line of text shoved in an announcement bar, and we're excited to see how we can leverage the interplay of custom content to create even more meaningful merchant and customer experiences.
Developer Tooling
Theme App Extension
Apps are one of the best things about Shopify, however they previously required coding into a store’s theme to install. Now, that’s about to change.
Key points:
- Themes are now a set of separate components, so we can work with apps without touching the theme's code
- This means no more embedding app code directly into a theme
- App blocks will be available from within the editor
- File organisation looks a lot like themes
- Script tags are going to be deprecated
What this changes for us
Of the many things we love about Shopify, apps injecting code into themes was lower on the list. Have you ever inherited a legacy theme and sighed in existential dread upon finding artifacts of Liquid conditionals left by a long-deleted app? Us, too.
Even on new projects, the previous approach to app installation made development tricky. We've accidentally overwritten our app settings with a theme watch left running in the background more than once. Our understanding of apps as developers is that they are unique entities apart from our themes, and now the code will be structured accordingly.
We're also excited to choose whether and where to place our apps from right within the editor and think merchants are going to love this feature, as well.
Dawn
Dawn is Shopify’s all-new ultra lightweight theme and their first open-source one. It’s built for performance and aesthetics for merchants, and it’s an exciting development for our Dev team also.
Key points:
- Designed for modern browsers
- Ships with all new features
- Built for browsers with semantic markup and progressive Javascript
- Web components and custom HTML elements
- Lean and maintainable
- Product API updates
What this changes for us
We have so many positive feelings about Dawn that it's hard for us to articulate all of them. For many of us, this really feels like the dawn of a new era in which Shopify development feels modern. If you worship at the altars of atomic principles and performance, Dawn might have been the best news of Unite. We're just starting to play with Dawn and will be sharing our thoughts in greater depth soon, but we think the jump from jQuery to progressive - and minimal - JavaScript is a pretty good metaphor for where we see Dawn taking us.
Git Integration and CLI Updates
This update from Shopify will allow greater support for Developers working with the platform. It connects a lot of the tools they use to help build stores, making things smoother and more efficient.
Key points:
- True development and theme support
- Connect Dev store to Github from right in the admin
- Clone repo and set up CLI → shopify theme serve
- No more manually pulling theme settings data into repos
- Storefront renderer makes stores 5x faster
What this changes for us
The cherry on top of the tooling upgrades is the announcement of integrated source control and true development theme support. We've done a lot of work internally to build processes to bridge the gap that has existed between our love of source control and our need to work safely and transparently. There's not a single dev on our team who doesn't clone a theme and manually copy its ID into a config.yml file several times weekly (or daily if we're being real). Though we're not against taking the time to create staging links for our PRs and periodically pull our staging content, it definitely feels laborious. Working with integrated source control and release pipelines in services we love is a joy, and we're excited to have more friendly automation in our day to day.
Extending Checkout with Apps
Checkout UI Extensions
In the spirit of making every aspect of a Shopify store unique to each merchant, they announced that merchants will be able to extend their checkout with apps. This sort of functionality was previously only available to Shopify Plus merchants, and will soon be offered to every Shopify merchant.
Key points:
- Checkout code hosted on Shopify CDN and run in sandbox
- Extensions include, for example, free gift with purchase automatically applied, legal disclaimers, pre-purchase upsells.
- Checkout apps will also automatically work with Shop Pay
What this changes for us
We're never dropping a block of text into a Checkout page again. Well, we won't say never, but we're certainly unlikely to now that we can encapsulate our code and integrate it in more meaningful ways. Working with Checkout has always been a bit of a bear. Sure, we've been able to achieve things like shipping disclaimers, gifts with checkout, and dynamic free shipping thresholds, but they typically involve conditionally rendering a carefully built script snippet attached to our theme. In addition to requiring unwanted changes to our core files, this approach is not easily extensible, bloats our codebase, and leaves our source susceptible to accidental interference. We're excited to standardize and extend our Checkout upgrades and have a feeling a Checkout App boom is on the horizon.
Other announcements we’re excited about
Scripts V2
Shopify Plus merchants will be glad to hear that there are also updates coming to Scripts - one of the Plus exclusive features that previously was the only way to extend checkout functionality. The update introduces the ability to write Scripts in any programming language without touching a line of code.
Key points:
- New developer tooling - can now use preferred workflow
- Deployed using apps - merchants don't have to touch code
- Eventual future in which checkout scripts can be shipped as apps to multiple merchants and people can be checkout app developers
Making Development Easier
A number of announcements made at Unite all fall under this category of making it easier for Developers to do what they do best.
Key points:
- Updated dev docs, CLI, scaffolding
- Spin up app with Shopify create node
- No revenue share on the first $1 million made from Shopify Apps which resets every year - this will allow for more innovation with new developers entering the ecosystem.
- Hydrogen - Custom storefronts AKA Headless (!). Future release, so watch this space.
Final Thoughts
Let’s close out with some additional comments from others on the Dev team:
“These newest developer experience improvements from the Shopify team will usher in a new class of enterprise clients with Netflix leading the charge.” - Josh Echeverri, Developer.
“I can't wait to see what we can accomplish for our merchants using theme app extensions. It's going to give us a lot more flexibility when developing a custom look and feel!” - Kaitlyn Noone, Developer.
“Shopify has taken ecommerce to the next level. The new Online Store 2.0 changes of Metafields exposed in the product admin and Sections Everywhere empower merchants to manage their theme and content in even better ways. The new GitHub integration brings our workflow on par with standard web development tooling, enabling our deployment process to be more robust and automating many tasks require for launching new features. In my mind, Shopify has set itself apart as the premier ecommerce platform, allowing your team to offload so many of the mundane chores and instead focus on your unique customer experience.” - Josiah Mory, Director of Engineering.