Table of Contents
Online Store 2.0: What’s New For Shopify Developers
In 2020, more than 450 million people checked out on Shopify. Shopify is one of the leading eCommerce platforms for companies looking to create an online store and operate their retail business on the internet. Shopify is an excellent solution for many merchants, and the platform manages commerce for over 1.7 million businesses worldwide. In recent studies, Shopify announced improvements to its eCommerce platform in terms of ease of use, prominence, performance, and developer control.
The word from Shopify is that Online Store 2.0 is the fruit of an essential rebuild of the language and is used for template building. Shopify’s online store 2.0 is one of the most important and significant platforms to date. With this update, developers will be able to create spectacular experiences for merchants and shoppers. Online Store 2.0 opens up massive opportunities for developers to build themes and apps for Shopify merchants. Shopify has worked hard to overhaul the online marketplace experience and introduce new developer tools that will assist developers in creating exceptional experiences for companies and customers.
Shopify is one of the world’s fastest-growing eCommerce platforms, allowing businesses to set up an online store to sell online, in-store, and through third-party channels with ease. Shopify has transacted over $200 billion in sales and is trusted by some of the world’s most trusted brands. It has primarily redesigned four components of its online store-
- The online editor
- Store content
- Developer tools
In this blog, we’ll look at these new tools and features to understand how they impact your work and the possibilities they present. We’ll also explain the requirements to update your themes and apps to online store 2.0 standards.
The New Theme Architecture
With the old online store version, merchants and shoppers were limited in the number of blocks available inside the store. Stores need to have different templates that represent different products. With the online store 2.0 versions, as a merchant, you now have the option of adding selections to each new page. It’s possible to activate the templates on each page so that they specify the settings for the page. With this, you can list all the sections of a page, collection pages, custom pages, blog posts, and many more such things.
The template files prescribe which sections appear by default and the order they appear on a theme you install. Once you’re done adding the template, you can add dynamic sections as preset themes by going to the theme editor.
Theme App Extensions With App Blocks
The theme app extensions for developers can help you add several features as well as extensions. You can also expand the merchant’s site functionality with the help of this. As we know, there were not many options to integrate with themes, and therefore, developers had to code an integration logic for live themes. This made it really difficult to make features that worked consistently across multiple themes.
In Shopify 2.0, the application’s modularity allows you to add and delete user interface components using a theme editor without viewing the source code. App modularity is another highlighted app, and this gives an easy-to-use interface and an app’s supporting assets. With Shopify 2.0, you can effortlessly manage all the platforms and host an app’s supporting assets.
Changes To Metafields
With the Shopify 2.0 update, merchants and shoppers can add meta fields and assign them using the new theme editor without needing APIs or any other coding. You’re free to add content the way you like to see your product page, introducing space for adding information that will help genuine buyers, such as a size chart or an ingredient list. You can also modify the data that is unlikely to appear in the store editor using meta fields. One more feature implanted within the theme is the product warranty and sizing chart. This selector’s intuitive user interface makes it straightforward to select a particular file from the store.
Here are the different ways to modify meta fields.
- Flexibility– Metafields are more flexible. This helps to import commerce data.
- Standard Meta Fields– This makes it simpler for custom themes to start working out of the box on stores across market verticals.
- Presentation Hints– You can also add hints to meta fields for rendering store data.
Metafields keep up a lot of media, like images or PDF files. Rather than hard-coding an asset into a theme, the meta fields file picker makes it easy to upload and select product pages. Metafields even supports a wide variety of file types with Shopify’s file picker.
For instance- If merchants or shoppers would like to have a product warranty or sizing chart available for download on a product page, the file selector makes it easy to select that file with a simple UX and insert it where the file meta field is placed on their theme.
With the API version, you can use the file API to create, update, and delete generic files. This opens up opportunities for apps to use their space for files, and images that aren’t directly associated with a product, including images used in themes.
Developers can gain access to the contents of settings/files through the new files API. This GraphQL API enables apps to upload or select existing media content from settings/files. Apps can now benefit from access to this admin area, including populating media metafields with content.
This is the best opportunity for apps to use this space for files and images that are not associated with a product, including images used in themes.
Liquid Input Setting
An additional update to the theme editor is the ‘liquid input’ setting, from which you can easily add custom liquid code to pages from the editor itself. Users can add liquid code directly to Shopify’s editor pages, a liquid input setting in the 2.0 update. The liquid property is similar to the HTML property, with the only difference being that liquid variables are now attainable.
Therefore, merchants or shoppers have both global and template-specific liquid objects available to them. These features will eliminate the obligation for merchants to manually alter any theme’s code when adding code for applications that use the liquid. This will let you make store decisions while also freeing time to focus on innovative integrations and solutions.
New Developer Tools
The Shopify 2.0 update will enable you to create new apps and test, develop, and install new themes. There will be great opportunities for developers to build new apps and themes for you. The Shopify GitHub integration makes the process of using the Shopify command-line tool and theme check easier, and both tools let you speed up the development process with test themes in a sandbox environment.
Shopify GitHub Integration
The new interface with GitHub significantly simplifies the tracking and management of new theme development and maintenance. When you connect with a GitHub user account or organization to an online store, chances are both pushed and pulled from a GitHub repo that is always in sync with the current state of selected themes. In addition, native version control support lets you create, track, and manage changes to the theme code.
These themes allow developers to collaborate safely when editing themes by introducing native support for version control. The integration lets developers collaborate safely by editing themes with the introduction of native support for version control.
The GitHub integration with themes enables developers to collaborate safely on themes using native version control capabilities. With version control capabilities, the integration allows developers to engage in theme editing.
The Shopify CLI tool has been updated. Firstly, developers used the Shopify CLI tool to make Node.js and Ruby on Rails applications, but with the recent updates, they can now create custom themes using the CLI.
The Shopify CLI accelerates your theme development because it can now-
- Safely develop, preview, and test changes to the theme inside of development themes
- Hot-reload CSS and liquid section changes as you’re developing
- Initialize a new theme project using our new theme, dawn as a starting point
- Publish themes from the command line
- Run theme check on your theme
- Populate test data for your theme, including products, customers, and draft orders
Development themes are unseen themes that are temporarily connected to the Shopify store for development purposes. The development themes are not displayed in the admin area; you need not worry that store visitors will see your site. Development themes can be used to view the changes to a theme being developed locally in real-time, interact with the theme, and customize the theme with the theme editor. Hence, the new CLI tool gives you plenty of control over how the final theme appears.
Theme Check is another vital component for Liquid and JSON that scans the themes for errors. When the scan is done, the tool highlights the best practices for both the Shopify platform and the Liquid language. This integrates with editors and identifies issues with the code and Visual Studio.
To understand the issues that persist, error messages with a link to the failed check appear. Theme checks are included with the Shopify CLI tool, so you don’t need to install them separately.
How Will Shopify 2.0 Benefit Merchants?
Shopify 2.0 online store offers various benefits to businesses of all types and customers, including-
- When a developer is recruited to design a new portion, the new block will be offered in all stores, ensuring the investment’s future viability.
- Increased speeds
- Metafields are integrated natively
- App integration made simpler
- Modification of the checkout section
To Sum Up-
Shopify’s and Shopify Plus’ flexibility has genuinely transformed with the launch of online store 2.0. From full-page editing ability to native meta fields within Shopify to an improved editor UI and other needed tools- we can’t wait to watch the platform transform as more and more themes adopt it. If you too want to build a powerful online eCommerce store then check our Shopify development services, if you have any queries contact us below!