What Shopify Online Store 2.0 Means for Developers

(Source: Shopify)

‍

The Online Store 2.0 announcement from Shopify Unite is an investment in performance and tools for developers. The new, improved environment for Shopify developers puts customisation at the forefront.

We’ve touched on the basics of the Shopify Online Store 2.0 announcement and the benefits for merchants, but how will it affect developers? In part three of our four-part Shopify blog series, we discuss what Shopify Online Store 2.0 means for developers – the benefits, challenges and opportunities.

How Online Store 2.0 Affects Shopify Developers

From new developer tools to upgraded theme architecture, we dive into the features and benefits of Online Store 2.0 for Shopify developers and how the new update may present new challenges or opportunities.

Building and editing theme tools to testing tools, the new toolset accompanies Shopify’s new integrations. With GitHub for extended support, Online Store 2.0 introduces the new default theme and the reduced use of JavaScript. Online Store 2.0 also brings real-time testing options, the reopening of the Theme Store, and more.

So, what exactly does the Shopify Online Store 2.0 mean for developers?

We’ve crafted a list of how Shopify Online Store 2.0 may benefit developers, exploring the following topics:

1. New developer toolset
2. Improved integration options
3. Development enhances
4. Updated theme environment

Shopify’s New Developer Tools

Online Store 2.0 brings a new way of building apps and themes to the table. A new suite of developer tools assists the development and testing process – seamlessly integrating into Shopify.

Building and Editing Themes Developer Tools

Shopify CLI (Command-Line Interface) is a command-line tool that helps Shopify developers quickly test and share Shopify themes. For Shopify developers now working on Online Store 2.0 themes, Shopify CLI replaces Theme Kit.

Shopify CLI helps developers build Shopify themes and apps – quickly generating Node.js apps, Ruby on Rails apps, app extensions, and Shopify themes. The Online Store 2.0 changes mean that theme development can be carried out safely, with the ability to push and publish themes right from the command line. Shopify CLI also automates many common development tasks.

Web-based Theme Editor Developer Tools

The Admin Theme Editor is an interactive editor that enables merchants to customise their online store and theme. Shopify developers should account for this tool when developing themes to ensure the best merchant experience.

The Admin Code Editor is a code editor built into the Shopify admin. Merchants and Shopify developers can use this editor when customising themes in the Shopify admin.

While these Admin Code tools aren’t brand new to Online Store 2.0, Shopify developers must refer to these tools when developing themes.

Testing Developer Tools

Lighthouse CI ensures that themes are performant by using the Lighthouse CI GitHub Action. This new tool helps developers optimise and detect potential errors in theme code.

Existing tools developers use for testing include Theme Check and Shopify Theme Inspector for Chrome. Theme Check is a command-line based linter for themes, while Shopify Theme Inspector enables developers to debug Liquid template performance.

Version Control Developer Tool

The Online Store 2.0 includes a GitHub Integration – helping Shopify developers to push and track changes to and from a theme in a Shopify store using GitHub. In addition, developers can manage Shopify theme code through GitHub’s version control.

Keep reading for a more in-depth understanding of Shopify’s new integrations as we touch on the new GitHub Integration and more.

How the New Toolset Can Help Shopify Developers

The new toolset can assist developers in the development and testing process. For example, the building and editing theme tools help to test and share themes quickly, while the version control tool helps developers track changes using the GitHub Integration. With various tools already available, the new tools add that little bit extra functionality to Shopify – making it easier for developers.

Shopify’s New Integrations

Online Store 2.0 comes with new integrations – making development and maintenance easier to manage. Updated integrations include the Shopify GitHub integration, the updated Shopify CLI tool and more.

GitHub Integration

GitHub accounts can be connected to Shopify stores, changing everything to be in-sync. GitHub enables developers to collaborate easily when editing themes by introducing native support for version control.

Hydrogen

Shopify's web storefront solution to improving the buyer experience is Hydrogen. Hydrogen is a developer toolkit that includes scaffolding to help developers get up and running with only a few clicks. The set of React components help developers build the foundation of commerce websites so that more time can be spent on design features.

‍

"Hydrogen’s quick start environment provides an approachable path for web developers to build custom storefronts quickly."

Shopify also previewed Oxygen, which is essentially the way to host Hydrogen storefronts directly on Shopify – in a way that is global, fast and optimised for commerce.

While Hydrogen allows for custom storefronts, Oxygen is the hosting server for Hydrogen that spins up a staging site each time developers push to GitHub.

Theme Check

Theme Check is a language server for Liquid and JSON, both of which scan themes for errors and highlight best practices. The tool can integrate with text editors and identify several issues, like missing templates or performance issues.

How Shopify’s New Integrations May Benefit Developers

From native version control support to improved performance, the new integrations make Shopify developers’ lives easier. Shopify integrating with GitHub is a pretty big change, which we can expect to see the results of very soon – as developers adapt to Online Store 2.0.

Shopify’s Development Enhancements

Later on in the year, Shopify is releasing a series of enhancements – helping developers improve development workflows.

Improved Documentation

Shopify has improved its developer documentation to focus more on goals and making it easier for developers to find the information they need. Other changes include improved readability, new typography and layouts options, and more.

Developer Console

Shopify is introducing the Developer Console, where developers can test and edit app extensions in a real store-like environment. This new feature means developers can expect a better, faster and more realistic app building and testing experience.

With the Developer Console, any changes developers make to the local environment renders straight away. Therefore, developers don’t have to push or publish their apps to view changes and modifications. Through the mobile version of an extension via QR code, developers can ensure extensions transform correctly across both desktop and mobile.

Google Cloud Pub/Sub

Google Cloud Pub/Sub is available for developers to manage webhook events easier. Developers can gain events at a rate that they can control – meaning event delivery will be more reliable along with fewer app errors. Developers no longer need to build and host an API and queue system to receive webhooks, so Pub/Sub makes it easier to consume webhooks.

How Shopify’s Development Enhancement Could Affect Developers

Improved documentation makes it easier for developers to focus on business goals, leaving time for other areas of improvement. Just like how developers can now test and edit apps in real-time in a real store environment. The new enhancements make developers’ jobs straightforward and make the nitty-gritty tasks more manageable.

Shopify’s New Theme Environment

When it comes to themes, Shopify has announced many changes. Like the Theme Store reopening. And the new default theme. Significant changes are underway, and developers should make time to adapt to these changes.

The New Theme, Dawn

The brand new default theme ties all the new features together. Dawn is Shopify’s first source-available reference theme with flexibility and a focus on speed. It’s built with HTML and CSS to ensure greater experiences across all browsers. Dawn is designed to maximise flexibility while minimising complexity.

The emphasis on speed has resulted in Dawn being fast by default. To be exact, 35% faster than the old default theme, Debut (the theme used by over half of merchants currently). What developers should keep in mind about Dawn is:

• It has JSON templates on all pages – this is where Dawn helps developers, as they can use it as a model for creating their own theme.
• Uses minimal JavaScript – Dawn leans on native browser features instead of JavaScript libraries and polyfills to ensure merchant stores are fast-loading without comprising the UX (User Experience).

The Reopening of the Shopify Theme Store

The Shopify Theme Store reopens to partners on July 15, 2021. On that day, Shopify developers can submit new themes for review, while approved themes will be published. The improvements of Online Store 2.0 brings various following benefits, just like the Theme Store.

Come September, Shopify is removing all revenue share on the first million dollars that developers make annually on the Shopify Theme Store. If developers make less than $1 million (USD), they pay a 0% revenue share, and the numbers are reset every year. In addition, developers pay a 15% fee on incremental earnings over $1 million (USD).

There’s a one-time submission fee of $99 (USD) per account to submit to the Shopify Theme Store. In addition, there’s also a 2.9% processing fee on all transitions, but there’s more information on that soon.

How Shopify’s New Theme Environment Impacts Developers

Minimal use of JavaScript is significant to developers – it’s something to account for sooner rather than later, as speed becomes a top priority in the internet world. Developers can also experience great advantages from the Theme Store reopening, as they can now upload themes and rest easy with the revenue share fee removal.

Shopify Online Store 2.0 is the Future of Commerce

Sections on every page, app-powered blocks, content flexibility, improved developer tools, and a focus on theme building are all a part of Online Store 2.0. The new and improved Shopify store platform means more opportunities for developers to build integrations and new themes, improving the buyer experience for any merchant store.

There’s even more to Online Store 2.0 than how merchants can benefit from it and how it affects Shopify developers, and that’s to be discussed in the last blog of our Shopify series.

By the end of blog number four, you should have a much better understanding of Shopify Online Store 2.0. Finally, our last blog covers Shopify and the future of commerce – which anyone in the eCommerce industry should be preparing for.

If you’re looking to migrate to the Shopify Online Store 2.0 platform, get in touch with us today. We’re here to help you migrate as seamlessly as possible, ensuring your eCommerce business is built to succeed even with future developments.