At the Shopify Unite Conference on June 29, 2021, Shopify announced the most expansive update to date – Shopify 2.0. The revised Shopify infrastructure, tooling, and technologies aim to improve site speed, performance, and usability. It is one of the most significant improvements that offers massive opportunities for developers and merchants. Let’s walk you through the host of improvements, features, and benefits of Shopify 2.0 that allow unlimited customizations, breaking down the complexities of store development.
Before moving forward, let’s glance at what Tobi Lutke, CEO of Shopify, thinks about the revised infrastructure.
“The internet is the world’s largest city, and Shopify is building its commerce infrastructure. Especially over the past year, we saw independent businesses succeed by showing up creatively and uniquely in this city. The future of commerce on the internet relies on creative expression at every touchpoint. Together with developers, we are building the infrastructure to make this possible.”
What is Shopify Online Store 2.0?
Shopify 2.0 focuses on the following:
Sections On Every Page
The earlier version of Shopify allowed you to drag and drop multiple sections, arrange them how you liked, and add content to each section – but only on the home page. And on other pages, such as collection, product, and blog pages, you could only edit the content. However, the game-changing Shopify 2.0 allows the store owners to add, remove, and re-arrange sections throughout the site.
Now the merchants can set up different templates without requiring a developer to add the elements manually. Instead, you can activate the templates on each page using JSON template files, which store settings data for different pages.
Updated App Extensions
Previously, there was no direct way to integrate apps with themes. Instead, the developers had to code an integration logic for existing themes, making it challenging to develop features that would work smoothly on multiple themes.
However, Shopify 2.0 offers theme app extensions for developers allowing them to extend apps into Merchants’ themes via app blocks. It helps improve the merchant’s site functionality and gives them complete control over exactly which page it will display and the location of the page it will appear on. It even allows updating the app settings directly through the theme editor.
Enhanced Theme Editor
Gone are the days of examining different sections to find the best one! Shopify 2.0 brings impressive updates to the theme editor, which now displays a tree-down view of all the collapsible sections in the sidebar. It’s now easier to visualize sections within a page, and it lets the merchants easily modify the hierarchy of a page. The improved UI on the theme editor offers ease of use for updating and revamping the online store.
An additional update to the theme editor includes the Liquid Input Setting, allowing merchants to add Liquid code directly via the theme editor. The Liquid setting is congruent with the HTML setting, except that it enables the merchants to access global and template-specific liquid objects. It reduces the need for manually changing the code of a theme, mainly when adding it for apps that use Liquid.
New Developer Tools
Shopify 2.0 introduces a whole new suite of developer tools that integrate seamlessly into Shopify. The introduction of GitHub integration, an updated Shopify CLI tool, and Theme Check streamlines the process of developing, testing, and deploying your themes.
Connecting your store with GitHub makes theme integration and development more accessible. It helps you implement workflows while working on the merchant store. The new Shopify CLI lets you create, preview, and test changes to themes. In addition, the dev server enables you to reload CSS and Liquid section changes while offering you control of how the final theme will display.
New Reference Theme
Dawn -the new theme is 35% faster than the old theme, Debut. It is Shopify’s first source-available reference theme built with semantic markup with HTML and CSS. And it will help maximize flexibility while breaking the complexities. Below are a few differences between Debut & Dawn Shopify themes.
| Debut | Dawn | |
| Sticky Option | None | Dual-scroll experience on large screens |
| Color Code | No framework | Framework of color structure |
| Slide Show | Available | Replaces with a section that allows for common patterns |
| Heade/Logo | Limited flexibility | Flexible with Sticky options |
| Image Cropping | Images may get cropped | Images are not cropped |
Upgraded Metafields
Unlike the previous version, you don’t need APIs or third-party apps to edit metafield functionalities directly on the product, product, or collection page. Shopify 2.0 also allows you to add presentation hints to meta fields for rendering store data.
Multilingual Capabilities
With Shopify 2.0, you get multilingual stores built natively and don’t need external integrations.
Benefits of Shopify 2.0 For Shopify Developers
- A whole new suite of developer tools
- Updated theme architecture
- Enhanced development, testing, and deployment options
- Improved app integration options
Benefits of Shopify 2.0 For Merchants
- Flexibility of adding up sections to different pages
- Ease of customizing sections for all templates
- Adding metafield functionalities without APIs
- Ability to modify the checkout section
Shopify vs. Shopify 2.0 – A Comparison
| Features | Shopify | Shopify 2.0 |
| Default Theme | Debut | Dawn |
| Default Section | Only on Home Page | Available for every page |
| Shopify App Assets | Developers need to host themselves. | Shopify CDN hosts all the assets submitted via theme app extensions. |
| App Integration Logic | Build integration logic for every Shopify Vintage theme. | Theme app extensions for developers via App Block |
| Coding | Hardcode meta fields into themes or rely on APIs to make changes to product pages. | Use dynamic sources to insert standard meta fields and known resource properties as setting defaults. |
| File Picker Options | Colour, Data and Time, File, JSON, Measurement, Number, Rating, Reference, Text True or False, URL | + Images, PDF files |
| Meta Field Access | Created, whitelisted via the Admin API, and be able to retrieve all your meta fields via the Storefront API | Developers can gain access to the contents of Settings/Files. |
| Updated Theme Editor | Need to drill down into different sections to update the hierarchy of a page. | Easily update the page order, i.e., the editor now displays a tree view of all the content on a page in the sidebar. |
| Liquid Input Setting | – | Add custom Liquid code to pages directly from the editor. |
| Development Tool | Theme Editor | Shopify CLI |
| Version Control | – | Shopify GitHub integration |
| Theme Performance | Theme Check and Shopify Theme Inspector for Chrome | + Lighthouse CI GitHub Action |
| Identify Issues in Theme Code | – | Improved Theme Check |
(Source: OSC Professionals)
Conclusion
This blog covered different features of Shopify 2.0 that promise enhanced site performance while offering faster load time and improving bounce rates. In addition, the new upgrade offers an overall improved experience to developers and merchants. At Nivara, our Shopify developers have gained expertise in developing Shopify stores from scratch using the latest OS. So, if you want to build an online store from scratch, don’t hesitate to reach out to us. We are a renowned digital agency for eCommerce helping businesses leave a mark in the industry.