Skip to content
Table Of Content
Shopify Online Store 2.0
Sept 1, 2021 | 8 min read
1. QuickRead
More than 450 million individuals would have used Shopify by 2020. In terms of Gross Merchandise Volume, the firm handled more than $120 billion. It is an undeniable reality that Shopify is massive and rapidly expanding.
Shopify introduced a number of new features on Tuesday (June 29, 2021) aimed at making the platform more customizable for everyone running a Shopify business. Online Shopify 2.0 introduces a plethora of new features and themes for Shopify retailers.
According to Shopify, the Online store 2.0 is the result of the most significant rewrite of the language it employs for template building: the Liquid language.
For starters, the redesigned online shop will make it simple for developers to add unique features to their stores. Netflix was granted early access to this technology, which they utilized to launch Netflix.shop, the company’s first e-commerce store.
Here’s a quick rundown of what the Online Store 2.0 entails for you.
2. The New Theme Architecture
Until now, merchants on Shopify have been limited in how they represent their businesses, with section flexibility limited to only the home page. To achieve a similar effect on other pages, code edits, elaborate workarounds with blocks, or custom apps were required.
That all changes with the sections on each page. Merchants can now add sections to any page, not just the home page, which opens up plenty of new ways to customize every aspect of a store.
You can specify the sections that will appear in the JSON template files. You can specify which sections should appear by default when your theme is first installed, as well as the order in which they should appear, in the new JSON template files. After you have added the JSON template, you can go to the theme editor and add any section with presets, just like you did before with dynamic sections on the home page.
3. Theme App Extensions with App Blocks
With the new theme architecture, the way applications interact with the storefront has been changed as well. There is currently no organized, end-to-end method for apps to connect seamlessly with themes. Developers are left to create their own integration logic for every existing theme and host asset, making it difficult to create features that operate consistently across all themes and are quick everywhere in the globe.
To address these issues, theme app extensions for developers is introduced, which allow you to integrate applications into merchant themes via app blocks.
4. App Modularity
App blocks represent a significant shift in how applications are integrated into themes. Without changing a theme’s code, app developers can now create UI components that can be added, deleted, and modified straight through the theme editor. This also implies that uninstalls are cleaner, as ghost code is eliminated automatically.
Theme app extensions, like other app extensions, maybe simply built, published, and updated (with versioning) via the Shopify CLI.
Because of this modularity, you will not have to create integration logic for each existing theme. You will not have to worry about breaking changes being implemented because you will not have to open into the theme code to manually install your app. As a result, you will spend less time troubleshooting with users.
Use the Theme API and Assets API to see if a merchant is using a theme that is compatible with your theme app extensions. Knowing what kind of theme a merchant uses will help you provide the greatest onboarding experience possible for merchants who want to integrate the app into their theme.
5. Changes to Metafields
Developers no longer need to hardcode metafields into themes or rely on APIs to make modifications to product pages with Online Store 2.0. Theme developers may now utilize dynamic sources to define defaults for standard metafields and known resource attributes.
Merchants can now add metafields and attribute to their themes without having to utilize APIs or code. This means that merchants will be able to add exactly the material they require to the product page, such as adding an area for customers to include a size chart or ingredient list. Metafields can now be used to add in items that are unlikely to show in the core store editor.
They changed metafields in a variety of ways, as seen below.
More adaptable: Metafields now have a much more adaptable type system, which will evolve over time to become more suited to commerce data.
Standard metafields: Standard metafields make it much easier for custom themes to function on stores across a variety of market verticals right out of the box.
Presentation suggestions: You may now provide presentation hints to metafields, allowing Storefront API and Liquid users to show merchant data in the way that the merchant intended with considerably less custom code.
6. File Picker
Images and PDF files are now supported by Metafields. The metafield file picker, rather than hard-coding an asset into a theme, makes it simple to upload and select media on product pages. All of the photos you have saved in the Settings/Files area are immediately accessible.
For example, if a merchant wants to make a product warranty or size chart accessible for download on a product page, the file picker makes it simple to select that file with a simple UX and insert it where the file metafield is placed on their theme.
7. Files API
File API may be used to create, update, and remove generic files using API version 2021-07. This allows retailers to reuse files across several apps. These are added to the Shopify admin’s files page.
The new Files API will allow developers to access the settings/files. With this release, the GraphQL API makes it simple to upload or choose existing media files from settings/files. Apps can benefit from having access to this section of the admin while populating meta fields with content.
This allows apps to utilize this space for files and pictures that are not directly linked with a product, such as images used in themes.
8. Liquid Input Setting
A new Liquid input setting has been added to the theme editor, allowing merchants to add custom Liquid code to pages directly from the editor. The Liquid setting is similar to the HTML setting type except that it allows merchants to access Liquid variables, allowing them to access both global and template-specific Liquid objects.
This feature eliminates the need for merchants to manually modify a theme’s code, especially when adding code for Liquid-based applications. In Shopify’s developer documentation, developers may learn how to add this setting to a section or block or look at the custom-liquid section of the new Dawn theme for an example of how this can be implemented.
These improvements make it simpler for merchants to interact with the new capabilities of Online Store 2.0 and make decisions about their online store without having to engage with a developer, allowing developers to focus on creating innovative integrations and solutions.
9. New Developer Tools
Developers will be able to create applications and themes for Shopify merchants in a whole new way with Online Store 2.0. Shopify is releasing a set of new developer tools to enable this transition. These tools easily integrate into Shopify and aid in the development, testing, and deployment of your themes.
You will get more robust theme development with version control, a better sandboxed environment to develop themes locally, and streamlined development with a real-time linter tuned for Shopify themes with the introduction of the Shopify GitHub integration, an updated Shopify CLI tool, and Theme Check.
We will look at what each of these tools implies for you in the sections below.
10. Shopify Github Integration
Shopify has announced a new integration with GitHub that will make theme creation and maintenance more manageable. Changes are pushed and pulled to a Github repo that is constantly in sync with the current state of selected themes when you link your GitHub user account or organization to an online store.
By adding native support for version control, the GitHub integration with themes will allow developers to collaborate safely when editing themes. Developers may now use processes to ensure that modifications to themes are evaluated and merged on GitHub before being applied to a live theme while working on a merchant’s store.
The Github integration may be used in combination with Git subtrees to sync the production-ready files for those who utilize CI to do linting, testing, and file transformations before deploying to an online shop, such as running Theme Check or converting SCSS into CSS.
11. Shopify CLI
Shopify’s current Shopify CLI tool has also undergone some substantial modifications. The CLI has been used by app developers to swiftly build Node.js and Ruby on Rails apps and extensions, but it has now been expanded to incorporate themes.
The Shopify CLI speeds up theme creation by allowing you to:
- Changes to themes may be safely developed, previewed, and tested inside development themes.
- Thanks to the new dev server, you can now hot-reload CSS and Liquid section changes as you work.
- Create a new theme project with our new Dawn theme as a starting point.
- From the command line, push and publish themes.
- Run a theme check on your theme.
- Fill up your theme’s test data, including items, customers, and draft orders.
Development themes are hidden, temporary themes that are linked to the Shopify store you are testing. You do not have to worry about anyone viewing or editing it because development themes are not accessible on the admin/themes page.
Development themes do not count toward your theme limit, and after seven days of inactivity, they are removed from the store. They are also deleted when you run shopify-logout, so if you require a preview link that will not be destroyed when you log out, you should instead submit your theme to the store.
Development themes let you see changes to a theme you are working on in real-time, as well as interact with and adjust it using the theme editor.
These tools are intended to streamline your development process and get you up and running with Online Store 2.0 quickly.
12. Theme Check
Theme Check is a language server for Liquid and JSON that checks for flaws in themes and emphasizes recommended practices for Shopify themes with Liquid. This tool works with text editors like Visual Studio Code and can detect a variety of issues in your theme code, such as Liquid syntax mistakes, missing templates, performance difficulties, and more.
Error messages provide a link to the documentation for the failed check to assist you in rapidly debugging theme issues. You do not need to install Theme Check individually because it is included with the Shopify CLI tool. Learn how to install and utilize Theme Check while testing your themes in the developer guide.
13. A new reference theme
Shopify is releasing a fresh new default style to accompany the release of Online Store 2.0, which brings together all of the capabilities outlined above. Dawn is what we call it.
Dawn is Shopify’s first open-source reference theme, with OS 2.0 flexibility and a focus on performance. Instead of relying on polyfills and external libraries, it is designed with semantic markup and HTML and CSS to provide amazing experiences across all browsers. It is meant to maximize flexibility while minimizing complexity, which involves combining Shopify’s opinionated design with giving merchants the freedom to make modifications that they consider appropriate for their business.
When Shopify created Dawn, they focused on speed, and the result is that Dawn is quick by default, no matter what—it loads 35 percent faster than Debut, which is now used by more than half of merchants.
You may use Dawn as a model for unlocking sections on your own themes because it already contains JSON templates for all of its pages. It will ultimately replace Debut as the default theme for all new stores.
14. The reopening of Shopify Theme Store
Shopify will reopen the Shopify Theme Store to partners on July 15, 2021, in addition to the enhancements in Online Store 2.0. You will be allowed to submit new themes for approval on that day, and approved themes will begin to be published.
Even better, Shopify will stop taking a revenue share on the first million dollars you generate on the Shopify Theme Store in September. That implies that if your annual income is less than $1 million USD, you will pay a 0% revenue share—and those numbers will reset every year. Even if you earn more than $1 million USD, you will only have to pay a 15% revenue share on the additional earnings.
To submit to the Shopify Theme Store, there will be a one-time submission charge of $99 USD per account, plus a 2.9 percent processing fee on all sales. More information about this upgrade will be available soon.
With over 1.7 million merchants utilizing Shopify to run their companies, now is the perfect moment to create themes for them. Because the Shopify Theme Store has been closed since 2018, this is an excellent opportunity to get in early and establish yourself as a reliable theme developer.
Learn more about the Shopify Theme Store’s new criteria for submitting your theme. Sign up for a Shopify Partner account if you have not already, and get started on your first theme.
15. Summing up
The store on Shopify is divided into three sections:
If you are a store owner who is not a developer, the new online editor and content management system is likely to have the most influence on you.
Shopify’s new template language now includes an in-house editor similar to WordPress’s Gutenberg, which was introduced in 2018. This makes it more similar to page editors on platforms like Squarespace and Wix.
A variety of Shopify applications, including the famous Shogun page builder, can be simply replaced with the editor.
The new editor will allow small and medium-sized businesses to design new page templates and populate the data within them without writing a single line of code by utilizing Shopify’s built-in page sections and blocks.
Finally, the content management system has been updated with new functionality and has received a facelift. You will receive the all-new custom content typing with the latest version. Create content once and distribute it across all of your platforms, including your online store.
