Shopify Online Store 2.0—Introduction
Shopify reminds us of one of our old classmates who pretends to know nothing but performs surprisingly well in the exams.
Shopify has evolved from being a dark horse to the front-runner in the online space due to substantial technological advancements and a burgeoning need for online shopping.
And the platform continues to grow.
Being one of the leading eCommerce platforms enables businesses to open an online store and sell products online, in-store, and via third-party channels.
Shopify has big ambitions to grow even further, using the Unite event to unveil a slew of new functionalities aimed at helping small and large businesses alike.
Moreover, it continues to address the needs of its clients by providing new and innovative services aimed at optimizing merchants’ selling experiences.
Take a deep breath! We’re going to bombard you with additional facts!
The rest is history!
Shopify is adept at playing the intention game. However, with the 2.0 update, Shopify inadvertently or purposefully leaves some areas for improvement open for partners to exploit.
Here is an overview of what Online Store 2.0 entails for you.
Shopify Online Store 2.0—Overview
Online Store 2.0 has entirely revamped the store experience by introducing a completely new set of developer tools. It now enables developers to create a plethora of themes and apps for Shopify merchants.
Users can now centralize all available functions, build storefronts from the ground up, connect theme extensions, and manage applications within themes with the new editor.
Shopify’s new updated online shop 2.0 increases the platform’s visibility among developers and technology titans. A move indicating this was Netflix’s early access to Store 2.0.
To begin, the redesigned online store will make it simple for developers to customize their storefronts. Netflix gained early access to this platform and utilized it to launch —the company’s first eCommerce store.
The reference theme Dawn, developed as the new benchmark storefront theme, will be 35% quicker than the existing default theme. Shopify stated that the new theme would be open for developer submissions beginning July 15, 2021.
Shopify also announced that it would reinvest its infrastructure and developer tools. This update will benefit you as a merchant as it lets you avoid the hassle of re-platforming and create headless commerce storefronts or personalize your storefronts.
With the new store, everyone on Shopify can now establish, personalize, scale, and monetize a business.
In this article, we’ll examine these new tools and features in further detail to better appreciate their influence on your job and the opportunities they bring.
Additionally, we’ll discuss the prerequisites for upgrading your themes and applications to Online Store 2.0 standards.
What Is Shopify Online Store 2.0?
Simply put, Shopify is a platform for creating an online store.
Due to its browser-based architecture, you can use it anywhere with an internet connection. In other words, you do not need to install any software to utilize it, and because it is a ‘hosted’ solution, you also do not need to purchase hosting.
The Shopify unity event showcased updates and enhancements to the eCommerce platform to enhance the shopping experience for Shopify stores.
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.
It has primarily redesigned four components of its online store:
The bespoke storefront with CMS enhancements and the online editor will have a more significant influence on non-developers.
The overall change will provide developers additional authority through developer tools and a 0% revenue share on Shopify.
Consider the following new tools and features in greater detail to discover how they affect consumer experiences on Shopify Stores.
New Tools & Features
In Shopify 2.0, application modularity allows you to add and delete user interface components using a theme editor without viewing the source code.
With Shopify 2.0’s easy-to-use interface, you can effortlessly manage, work, and host an app’s supporting assets for your app.
Better Checkout Experience
On Online Store 2.0, the checkout will be substantially faster, permitting any store to process 1000s of transactions every minute.
Shopify will soon enable shops to provide additional payment options, resulting in a more localized shopping experience while increasing merchant conversion rates.
Additionally, the purchase now, pay later option is included to enhance the purchasing experience on your online business.
Buy Now, Pay Later
The concept of buy now, pay later has gained a lot of popularity of late. It enables shoppers to pay less upfront while increasing conversions and average order values for merchants.
With buy now, pay later, customers will have the option to pay in full now or later in four interest-free installments.
With a plethora of Shopify apps, retailers frequently struggled to find one that met their requirements. This issue is addressed in Online Store 2.0.
Customizable 404 Pages
This is the page that customers are directed to when they click on a broken link on your site. Traditionally, this has consisted of some text that reads, oops, we couldn’t locate that, and a button to continue shopping.
To make that a shoppable page, you need to change your theme’s code to include products or categories. Then, you can add sections to that page just like you can everywhere else with Online Store 2.0. It’s simple to have an area of your best-selling products, as well as links to your most popular collections.
Customizable Online Store
The new upgrade will provide merchants with the additional creative freedom to build their Storefronts without the need for “coding” knowledge to get started quickly. Developers will benefit from more extensibility and customization due to the “max code” access. With sections and blocks, you may soon add and change the information on your webpage.
Moreover, the Online Store 2.0 will enable retailers to promote their products impressively by giving additional product information.
Changes To Metafields
With Shopify 2.0 update, merchants can add meta fields and attributes using the new theme editor without needing APIs or any type of coding.
The update provides you the freedom to add any content to the product page, including additional information that may be helpful to potential buyers. Moreover, you can also modify the data unlikely to appear in the store editor using meta fields.
Another feature embedded within the theme is the product warranty and sizing chart. This file selector’s intuitive user interface makes it straightforward to select a particular file from the store.
The File API can create, update, and delete generic files with the latest 2021-07 version, enabling merchants to reuse many apps. In addition, the GraphQL API introduced in this version simplifies uploading or selecting existing media files via settings/files.
This section also allows applications to store data and images that aren’t directly linked to a brand.
Flexible Store Content
Merchants can now add meta fields and properties without using APIs or writing code to their themes. It means retailers can add the content they require to the product page, such as a section for purchasers to insert a sizing chart or ingredient list. Additionally, meta fields can also include uncertain things to be shown in the main store editor.
Metafields now provides the ability to store media such as photos or PDF files. In addition, the upload and choose media processes on product pages are simplified.
If merchants desire to put a product warranty or sizing graph on their product page, the file picker makes it straightforward to choose the relevant file and place it where their theme’s file meta field is positioned.
Developers can use this GraphQL API to upload or choose media files from the Settings/Files directory.
It enables apps to utilize this space for files and pictures unrelated to a specific product, such as images used in themes. Additional information about the Files API is available in the Shopify documentation.
Liquid Input Setting
Users can now add liquid code directly to pages directly from Shopify’s editor, thanks to the liquid input setting in the 2.0 update.
The Liquid property is identical to the HTML property, with the only difference being, liquid variables are now accessible. Thus, merchants have both global and template-specific Liquid objects available to them.
This feature will eliminate the obligation for merchants to manually alter any theme’s code when adding code for applications that use the liquid. As a developer, this lets you make store decisions while also freeing up time to focus on innovative integrations and solutions.
Consult the developer from Huptech Web for guidance and support.
More Product Information To Attract Customers
Previously, you had to modify your code to include more data about product items, clients, or transactions, which was cumbersome.
With this upgrade, you’ll eventually be able to update and alter meta fields directly from the Shopify dashboard without touching your code.
It is easy to complement your product information better with this feature. For instance, you might include particular care instructions on the product page for your buyers.
Additionally, the new Shopify save will enable you to store additional data about your products, customers, and orders within your Shopify account. With the addition of more information to your product page, you can now attract more customers. In addition, the new function enhances their in-store checkout experience.
New Developer Tools
Shopify 2.0 update will enable you to create new apps and test, develop, and deploy new themes.
The Shopify GitHub integration simplifies the process of using the Shopify command-line tool and theme check. Both these tools let you speed up the development process with test themes in a sandbox environment.
Personalized App Recommendations
Finding an exact fit for apps in the older version proved challenging.
However, in Online Store 2.0, the Shopify App Store will give tailored app suggestions for comparable companies. This tool will save you time by allowing you to identify the best match app for your shop quickly.
Changes to Shopify Checkout were also demonstrated at the developer conference. Custom storefronts have also been modified, allowing customers to gain more from Shopify’s improved infrastructure, reflecting changes to dedicated servers and how API calls are handled.
Furthermore, Hydrogen is a new React architecture that aims to make it easier for developers to create their bespoke shops. Another new tool is Oxygen, which Shopify claims will be its upcoming hosting platform, significantly enhancing efficiency.
Additionally, meta fields and custom content are identified as areas for improvement. Products and product variants may be rapidly added to store designs. The increasing usage of meta fields will provide Shopify users more excellent choices in the content formats they employ.
Shopify Github Integration
The new interface with GitHub significantly simplifies the tracking and management of new theme development and maintenance. Connect the online store’s GitHub user account to the GitHub user account.
The Shopify GitHub integration establishes a connection between your user account and the Shopify admin and links Git branches and store themes. In addition, Native version control support lets you create, track, and manage changes to the theme code.
The GitHub integration with themes enables developers to collaborate safely on themes using native version control capabilities. With version control capability, the integration allows developers to engage in theme editing. For example, developers might design workflows that require theme modifications to be evaluated and merged on GitHub before applying to a live theme when developing a merchant store.
The Shopify CLI tool has been updated. Previously, developers used the CLI tool to make Node.js and Ruby on Rails applications, but developers may create custom themes using the CLI with the recent updates.
Shopify CLI lets you create, evaluate, and test modifications to themes contained within development themes. Additionally, you can make a new theme project, push and publish themes, perform theme checks, and use the theme to fill test data for items, customers, and draft orders.
Development themes are hidden themes that are temporarily connected to the Shopify store for development purposes. Because the development themes are not displayed in the admin area, you need not be concerned that store visitors will see your site.
Development themes enable you to monitor the progress of a theme as it is developed locally in real-time, interact with it, and customize it using the theme editor. Thus, the new CLI tool provides extensive control over the appearance of the final theme.
The ‘Dawn’ Of Online Store 2.0
Dawn, a fresh new shop theme that is 35% quicker than the existing default theme, will accompany Online Store 2.0.
The default open-source theme has been optimized for speed, adaptability, and ease of use. The new style uses all capabilities available in Online Store 2.0, including app blocks and sections.
The new Dawn standard theme and added functionalities will allow theme designers to create new theme designs.
Another vital component of Liquid and JSON is Theme Check, which examines the themes for problems. Following the scan, the tool recommends best practices for the Shopify platform and the Liquid programming language.
The functionality highlights code errors by connecting with Visual Studio editors. The best part about theme Check is it comes pre-installed with the Shopify CLI tool.
The New Theme Architecture
Merchants had a limited number of blocks accessible in the previous online store version. Previously, stores had distinct templates that corresponded to specific products. However, with Shopify 2.0 update, you can add sections to each new page.
Each page’s templates can be activated using a JSON template file that describes the page’s settings. This allows you to list all the sections, collections, custom pages, and blog entries.
Moreover, you can also configure the sections appearing within the JSON template files that specify which section displays by default and in what order on an installed theme. Once the template is applied, you may use the theme editor to add dynamic parts as theme presets.
Theme App Extensions With App Blocks
In the older version, you could not integrate apps with themes. As a result, developers were required to write integration logic for pre-existing themes. This necessitated the development of features that functioned consistently across numerous themes. You can use the theme app extensions and app blocks to add new features and extensions.
Zero Percent Revenue Share
Shopify introduced a developer-first business model for the Shopify App Store and Shopify Theme Store. Shopify 2.0 will charge no commission on the first $1 million in the annual income generated by Developers on Shopify. As a result, Shopify’s revenue share will decrease to 15% after $1 million in sales, from 20% previously.
With this revenue-sharing arrangement, Shopify developers will be driven to produce additional applications and themes.
Although the firm will charge a registration fee for apps beginning August 1, 2021, the new revenue-sharing model incentivizes developers to create Shopify apps and themes. Additionally, it may be attempting to avoid some of the app-store friction observed in mobile, such as the current lawsuit between Epic Games and Apple.
Bulk Mutation API
The bulk mutation API on Shopify 2.0 lets you export the bulk data to a store.
Alternatively to the GraphML simulation, a bulk mutation procedure can be used. This is a straightforward method for importing all the data without encountering bottlenecks caused by many files.
Liquid Input Setting Themes
The updated liquid input setting themes allow merchants to easily upload custom Liquid code from the editor like the HTML setting.
Dawn is the new open-source reference theme designed for maximum flexibility and ease of usage. It uses various capabilities introduced in Online Store 2.0, such as JSON templates and app blocks.
When Shopify 2.0 Was Announced And Why?
Shopify 2.0 was announced on 29th June this year at the Shopify Unite event.
The motive to bring Shopify 2.0 into the online world was to enhance the online store experience with an entirely new set of developer tools. As a result, developers can create a wide array of apps and themes for Shopify merchants.
Shopify’s new updated online shop 2.0 increases the platform’s visibility among developers and technology titans.
How To Migrate A Theme To Online Store 2.0?
Now that we have learned about Shopify 2.0 and its features, it’s time to learn how to migrate a theme to Shopify online store 2.0.
Do you know, numerous elements of Shopify online store 2.0 rely on JSON templates.
When migrating your theme to online store 2.0, you can integrate the JSON capabilities by following these two easy steps:
Sections on every page
Shopify online store 2.0 lets you add, modify, and delete new and existing sections directly within the Shopify theme editor using a JSON template format.
This feature enables merchants to customize many additional parts of their business without relying on a developer. Additionally, it allows developers to create more maintainable themes through the use of modular components.
Additionally, you can incorporate standard meta fields into your theme as default defaults. By utilizing standard meta fields, you may increase the flexibility and reusability of your components and provide standard templates for various business segments.
Using this new architecture, you can design themes and add app blocks created with theme app extensions.
Furthermore, this app development framework allows you to add or upgrade an app without changing the store’s theme code.
Modular app blocks are used for packaging the code, which merchants can customize via the Shopify theme editor. When a merchant uninstalls an app, the merchant also removes the program’s code.
Before You Start
Before you begin, the following steps should be taken:
Theme Back Up
Create a duplicate of the theme on which you wish to work.
Duplicate the theme if you’re altering it with the code editor. As you edit the theme, ensure that it is unpublished. This is because you will be deleting files from the theme, which will affect the live storefront. Additionally, you may require a backup copy to refer to or revert to in the future.
Note: Use the Shopify theme command if you’re modifying the theme with Shopify CLI.
Identify And Remove Section References
Find and remove any %section% tags before converting your Liquid template to a JSON template.
Note: Don’t forget to remove the references before moving the code’s remainder into a section file. Moreover, references to other section files are not permitted in section files
Open the theme in the code editor or local development environment.
- Locate the /templates/product.liquid file.
- Search any percent section percent tags that include sections. Take note of their names and locations.
- After locating and noting the location of any percent section percent tags, delete them from the product.liquid> file.
Move Code From The Template Into A Section
Select a space to relocate section tags once you have removed them from the template code.
You have two options: copy and paste this code into an existing section or create a new one.
Option 1: Include code in an already-existing section
You may already have a section that renders a significant chunk of a page’s code. For instance, in Debut, the product template section includes a portion of the product page’s code.
- Open the file containing the portion to which you wish to add the template code.
- Copy the remainder of the code from the product.liquid.
- Paste the code in the section file.
Option 2: Create a new section and add code to it.
If you don’t find the theme’s current section file suitable, you have the option to create a new section that can keep the Liquid template code.
- In the sections directory, create a new file.
- Copy and paste the remaining code from the product.liquid file into the new section file.
Delete The Liquid Template File
Once you copy the code from the <product.liquid>, delete it from the templates directory as it cannot contain both a <product.liquid> and a product.JSON file.
Create A JSON Template File
Create a replacement JSON template once you have deleted the <product.liquid> file. Follow the following steps:
- Create a new file called product.JSON in the directory:
If you do so using the code editor:
- Select the “Add a new template” option.
- The drop-down option for ‘Create a template’ allows you to select ‘Product.’
- Create a new file named “product.JSON.”
- Keep the newly created file in the templates directory. It will help you edit the theme locally.
- Replace any default code within the product.JSON file after it is created. The type property should refer to, for instance, the name of the file into which the markup for the product template file was transferred in step 3.
- Save the document.
Test The Template
Open the newly created template in the theme editor to verify it renders appropriately.
Follow the below mentioned to use the Shopify CLI:
- Type Shopify login in the store domain in a terminal.
- Click on the link and complete the login process
- Navigate to the theme’s working directory
- Type Shopify theme serves
- Navigate to a product page
- In the left sidebar, a button labeled Add section will appear.
All inaccessible sections will now appear in the “Add Section” menu.
Add References To Sections
If the original <product.liquid> template file included references to different sections, such as a section for product recommendations; you can describe these in the product.JSON file and then select their placement.
- Product.JSON should now be open. Currently, the file only refers to a single central part containing your transferred code.
- Utilize this structure to create more parts. For instance, you can include a reference to a section on product recommendations.
- Define the order of the sections.
Provide recommendations regarding where you should place the section within the order array. For example, the section should be placed beneath the existing main section in this situation.
When you browse the theme editor and choose a product page, the product recommendations area should display below the product template section.
Add Support For App Blocks To Sections
In the section schema, enable app blocks.
Due to the absence of blocks in this part, you can add a new blocks node following the schema’s settings node.
Create application blocks
Don’t forget to check for the appropriate type and render the block using the %render block% tag to render an application block in your theme.
You can repeat the process mentioned above on all your theme sections.