The Complete Guide for Creating a Shopify Online Store 2.0 in 2022
In 2021, Shopify announced the new and improved Online Store 2.0 (OS 2.0), the most significant investment in their platform. As a result, many merchants ask themselves: Should I update/migrate my store to Shopify 2.0? With Shopify 2.0, developers and businesses will be able to design even more unique experiences that will shape the future of online commerce.
This innovative new platform gives Shopify merchants and developers more tools to establish, maintain, and adjust storefronts, making it easier for developers to create bespoke features and apps for merchants. For example, when you use a Shopify 2.0 theme like Impulse, Focal, or Pipeline, you may utilize the theme editor to add reusable sections and blocks to *all pages*, increasing your store’s potential without changing code.
The Online store 2.0, according to Shopify, is the result of the most significant rewrite of the language it employs for template building: the Liquid language.
To begin with, the redesigned online store will make it simple for developers to add unique features to their storefronts. Netflix was one of the first companies to gain access to this technology, and they used it to launch Netflix.shop, the company’s first e-commerce store.
Here’s a quick review of what’s new in Online Store 2.0.
Overview
The Online Store 2.0’s new features begin with a completely new editing experience. Using the new editor, merchants can create storefronts from the ground up, add numerous theme extensions, and manage apps within themes with ease. With the new editor, the goal was to bring all of the available features and functions together in one place.
Dawn, the new standard storefront theme in development, will be 35% faster than the current default theme (according to internal estimates). Shopify also stated that developing applications for the new theme would be accepted starting July 15, 2021.
Shopify also announced that it would considerably increase its infrastructure and developer tooling expenditures. As a result, you won’t have to worry about re-platforming to create headless commerce storefronts or customize your storefronts.
Shopify is attempting to increase its visibility among developers and tech titans with the new updated online shop 2.0. In addition, Netflix received early access to Store 2.0, which was a portent of things to come (mentioned earlier). It’s all-encompassing with Online Store 2.0. Thanks to the new shop, everyone can now develop, modify, scale, and monetize on Shopify.
What are the most significant features of Shopify 2.0, and should merchants upgrade their themes?
Here’s a quick rundown of the 2,0’s most notable improvements and enhancements and what they signify for your Shopify store.
- The ‘Dawn’ Theme Optimizes Loading Times
The new default theme for storefront theme development is ‘Dawn,’ which is 35% faster than the previous default theme, ‘Debut.’ Who doesn’t desire a more efficient store? The ideal webpage load time is less than two seconds. If the page load time is increased from 1 to 3 seconds, the likelihood of a bounce rate increases by 32%.
As you can see, the new version has many more features than the previous one. It implies you won’t require as many apps on your store, which will result in speedier load times.
- Sections Everywhere
Native content management has improved thanks to the addition of Sections Everywhere in Shopify Plus’s Online Store 2.0. It is most likely the most eagerly awaited feature among Shopify developers worldwide. Users can use sections across several page designs using Sections Everywhere, making content management more accessible and easy to edit without coding. In addition, merchants can now reuse content sections and modules in 2.0 Themes, ensuring that information is presented consistently from one page to the next. Allowing a merchant to add a video related to a product to the product page without displaying the movie on other product pages is an example. Before the widespread availability of sections, merchants frequently worked around this limitation by using page builder tools, such as Shogun’s, which slow down web pages and are difficult to update. As a result, they generated many bugs and required merchants to construct sites with inconsistent looks because they weren’t native to Shopify. Do you want to give this feature a shot at your store? It’s good to try out a theme like an Expanse or Focal.
- The Architecture of the New Theme
Merchants were limited in the number of blocks offered in the older edition of the online store. Previously, stores had different templates that corresponded to other products. You can now add parts to each new page in the 2.0 edition as a merchant. You could only add sections to the homepage previously.
With a JSON template file that specifies the page’s settings, you can activate the templates on each page. You can use this to list all of a page’s parts, collection pages, custom pages, blog articles, and other similar items.
You can specify the sections that will appear within the JSON template files.
On a theme you install, the template files determine which sections are displayed by default and in what order. After adding the template, go to the theme editor and add dynamic parts as theme presets.
- Extensions for Themes with App Blocks
Theme app extensions for developers can allow you to add various features and extensions to your app. With this, you can enhance the functionality of the merchant’s website.
There was no mechanism for apps to interface with themes previously. As a result, engineers had to create a tool for integrating existing themes. It made creating features that worked consistently across many themes extremely challenging. Unfortunately, that isn’t the case now.
Theme app extensions, which allow integrating apps to themes easier via blocks directly in the theme editor, are among the many great features in Shopify 2.0 for app developers. For example, on the product page, you can move the position of your product review app to adjust it. In addition, theme app extensions teach retailers how to incorporate applications into their stores and make them more familiar with the process. Brands will benefit from a more stable and seamless experience when installing and using apps due to this new strategy, allowing them to innovate and explore new ways to expand their businesses.
Additionally, app bans require less assistance and support from developers. There’s less likelihood of breaking changes now that you don’t have to open a store’s theme code to install an app, and uninstalls are cleaner, which means less time spent troubleshooting.
- Modularity of Apps
Modularity is another plus for the software. So said, you may now add and remove UI components from the theme editor as a developer. You don’t need to look at the theme’s source code. It makes managing supporting assets for an app a breeze. Shopify 2.0 makes it simple to manage and host your app’s supporting assets.
- Updated Shopify Filter for Collection Pages
With Shopify 2.0, merchants can now build storefront filtering right in their Shopify store’s navigation area. Filters in version 2.0 include:
- Availability
- Price
- Product type
- Vendor (Brand)
- Product options
- Metafields
The one major drawback of Shopify 2.0’s new filter is that it no longer allows you to filter by tags, which meta fields have replaced. As a result, more complicated filtering programs, such as Power Tools or Boostcommerce’s Product Filter & Search, may be required for larger retailers. Still, if your store has a limited catalog, the 2.0 filter will suffice. Check out the built-in filter first, and if it doesn’t meet your demands, try out a filter app.
- Modifications to Metafields
The new theme editor now allows merchants to add meta fields and properties to their themes. The good news is that you won’t require APIs or any coding to accomplish this.
As a merchant, you have complete freedom to add whatever material you want to the product page, including space for additional information that may be useful to potential customers, such as a sizing chart or ingredient list. In addition, you can update anything that is not likely to display in the shop editor using the metafields.
They changed meta fields in a variety of ways, as seen below:
Flexibility: Metafields are more adaptable than other fields, which allows you to import trade data securely.
Standard Meta Fields: Standard meta fields make it easier for custom themes to get up and running in stores in various market verticals.
Presentation Hints: To render store data, you can provide presentation hints to meta fields.
File Picker
Metafields now accepts a wide range of media, such as photos and PDF files. In addition, a meta field file picker, rather than hard-coding a specific file type into a theme, allows you to upload the selected media to product pages.
You can find the photographs in the settings/files section and start using them immediately.
If you prefer a product warranty or sizing chart, the file picker makes it simple to select that file. The meta field is now inside the theme.
Files API
File API may create, update, and delete generic files with the API version 2021-07. In addition, it enables merchants to reuse files across many apps. For example, Shopify admins upload these to the files page.
Developers will be able to access the settings/files using the new Files API. With this version’s GraphQL API, you may easily upload or select existing media files via settings/files. While populating meta fields with material, apps can profit from access to this specific section in the admin. In addition, it allows apps to store data and photos that aren’t directly related to a product, such as images used in themes in this space.
- Liquid Input Setting
The theme editor now features a Liquid input setting, allowing you to add custom Liquid code to pages directly from the editor.
The HTML and Liquid options are nearly identical. The only difference is that now you can use Liquid variables. In addition, liquid global items, as well as template-specific Liquid objects, are available to merchants.
When adding code for apps using Liquid, the setting eliminates the need for merchants to alter the code of any theme manually.
Use the developer documentation or see the new theme in Dawn’s custom-liquid section. As a developer, this makes it simple to make independent decisions about the shop, giving you more time to focus on new integrations and solutions.
- Updated Developer Tools
Using the online shop 2.0, developers may build a responsive website, apps and themes for you, opening up a whole new world of possibilities. In addition, the new developer tools work in conjunction with current themes to aid testing, development, and deployment.
The Shopify GitHub integration makes use of the Shopify CLI tool and theme check. These tools allow you to test themes in a sandbox, which speeds up development.
- Shopify GitHub Integration
The new GitHub integration makes tracking and managing new theme development and maintenance much more manageable. Make a connection between your GitHub account and your online store. The modifications are pushed to GitHub and pulled into a repository that is up to date on selected themes.
You can link your user account to the Shopify admin and attach Git branches to store themes using the Shopify GitHub connection. You can also make, track, and manage changes to the theme code thanks to native support for version control.
With native support for version control, GitHub integration with themes allows developers to collaborate while editing themes. In addition, the integration will enable developers to work safely together when editing themes with version control. For example, developers working on a merchant store can set up workflows in which modifications to themes are reviewed and merged on GitHub before being applied to the live theme.
- Shopify CLI
The Shopify CLI tool has also undergone some adjustments. Previously, app developers had to use the CLI tool to construct Node.js and Ruby on Rails apps, but with the recent updates, developers may now use CLI to create custom themes.
Here’s the entire list of features you’ll get:
- You can create, preview, and test modifications to themes within development themes.
- The dev server allows you to reload CSS and Liquid section changes quickly.
- Create a new theme project with the unique Dawn theme.
- From the command line, push and publish themes.
- Run the theme through a theme check.
- Fill in test data for customers and draught orders for the theme.
During development, Shopify stores have hidden themes attached. Admins are not allowed to view the development themes, so you shouldn’t worry about visitors to the store viewing your site.
Development themes have no impact on the theme limit. As a result, these are immediately removed after seven days of inactivity. They also get deleted when you log out of Shopify. However, you can push the theme to the store if you need a preview link that doesn’t disappear after logging out.
Development themes allow you to see real-time changes to a theme created locally, interact with it, and customize it with the theme editor. As a result, the new CLI tool allows you flexibility regarding how the final theme looks. The tools can make the development process go more smoothly and get you up and running with Online shop 2.0 in no time.
- Theme Check
Theme Check is another essential component for Liquid and JSON that checks for flaws in the themes. The program then highlights the best practices for the Shopify platform and the Liquid language once the scan is complete.
It connects with editors such as Visual Studio and detects code errors.
Error messages with a link to the failed check show for you to grasp the difficulties that remain. Theme Check comes pre-installed with the Shopify CLI tool, so you don’t have to install it individually.
Other Notable Features
- Bulk Mutation API
Operation Bulk, The RunMutation endpoint on Shopify, is a solution for bulk data export to a store.
You can use a bulk mutation operation instead of a GraphML simulation. It is a straightforward method for importing all the data without encountering any problems due to many files.
The following are the choices:
- productCreate
- collectionCreate
- productUpdate
- productUpdateMedia
- productPageUpdate
- productVariantUpdate
- metafieldUpsert
- priceListFixedPricesAdd
- priceListFixedPricesDelete
- Check Out Resources API for Discounts
The checkout resource returns the application type property for discounts added to the checkout. In addition, the field shows how the discount will be calculated. All of the following values are valid: automatic, discount code, manual, and script.
- Liquid Input Setting Theme
Merchants may now add custom Liquid code directly from the editor using the new Liquid input settings. It works similarly to the HTML option.
Merchants can use the global and template-specific Liquid objects without changing the theme code. The new reference theme is known as Dawn. It’s an open-source reference theme with many modifications and user-friendliness options. It uses the Online Store 2.0’s JSON templates and app blocks.
Wrapping Up
Shopify is one the best platforms for ecommerce development and has created a guide on migrating a theme to Online Store 2.0. Many Online Store 2.0 features, in essence, rely on JSON templates. By converting a Liquid template to a JSON template and putting any necessary Liquid code or HTML into parts that you can include in the new JSON template, you can migrate your theme to add support for these capabilities.
Alternatively, we can handle the migration on your behalf. As Shopify experts, Beetle Branding can assess the complexity of your migration before we complete it on your behalf. As a result, it helps you save time and ensures your store migrates to the new version without any issues that will adversely affect your sales. If you’d like to learn more about this option, contact us and speak with one of our Shopify specialists.
