What is Shopify 2.0/Shopify Online Store 2.0?
Shopify Online Store 2.0 was launched in June 2021, partially. It introduced new features and opened the door for Shopify developers to create themes and apps for store owners. What is Shopify 2.0? What’s new? I will cover everything you need, regardless of whether you are a store owner or developer.
Shopify has been asking for a better theme design for many years. Architecture that is based on what people (end users as well as developers) need.
Shopify’s limitations in theme editing will frustrate anyone who has used it to run an online shop. e.g. by being limits to adding/reordering sections on the homepage. Not being able to add apps to the website without having to hire developers. Or spending a lot of time fiddling with metafiles in order to achieve the layout you want. Shopify 1.0 was great in some ways, but it was also terrible in others.
Shopify 2.0. You can add sections almost everywhere. App embeds can add to sections/blocks. Native metafiles can be on the page, although they are limited.
The brackets indicate that 2.0 is not correct. We can’t use sections in blogs/articles at the moment. Native met fields are very inefficient and suck a lot. But, we need them less now so that they can use more. Those are just a few of the things Shopify 2.0 represents.
I’ll be looking at the new features and tools to help you understand how they affect the platform.
I’ll cover how to update Shopify 2.0 themes, apps and to the new standard so that everyone can make the transition to Shopify online store 2.0 Shopify.
Shopify Online Store 2.0 Features
With the new theme architecture, Shopify users can now customize their theme architecture with more flexibility. App developers have the opportunity to integrate new sections and blocks into Shopify themes.
Shopify 2.0 – Sections (almost everywhere!)
Merchants could only create dynamic sections on their homepage before Shopify 2.0. Only the homepage was allowed to be a section. Merchants will need to hire developers to modify the code, use metafiles or blocks to create workarounds, and/or use custom apps. None of these solutions was graceful.
Shopify 2.0 allows sections to be added to every page. This is not possible with blog posts. To give customers more customization options, merchants can add sections on every page.
You can clone the template and modify the sections to create a customized template for a specific product. Then, assign the template to that product. Both will display the respective layouts. Nice!
The 2.0 Shopify theme supports dynamic sections on the homepage, individual products or groups of products, individual collections, or groups, as well as the search and cart pages. The blog is not yet available, but it should soon.
How sections work
How did Shopify create sectioning on each page? The storefront’s rendering of templates has changed since the rebuild. Shopify’s online store 2.0 uses JSON template files. This allows you to list the sections of a page and store setting data for each section.
Template files are now available for stores that map to different areas of the site. These templates include custom pages, product pages, and posts.
These new JSON templates will allow you to define which sections should display by default and in what order they should appear when the theme launches The store owner can add the template to the theme editor. They can then edit any sections they wish. This process is similar to the one used by users on their home pages back in the days when there was only one section.
App blocks and theme app extensions
The new theme architecture has a significant impact on how apps integrate with the theme. Shopify 1.0 does not provide a structured solution for apps to seamlessly integrate with themes. Apps had to either give instructions or rely on guesswork which sometimes didn’t work, or spend a lot of time integrating each store manually.
Manage and host assets
Shopify’s Content Delivery Network allows users to add supporting assets to their app extensions. This will allow them to have fast hosting with Shopify’s Content Delivery Network (CDN). Users can also reference those assets directly from the extension’s blocks.
To build your first theme extension and make it compatible with Shopify 2.0, access migration documentation
This should make themes more responsive since many apps host on slower servers. This one is dependent on app developers’ uptake.
Keep content
Online Store 2.0 makes it easier to hardcode metafiles in themes and relies less on APIs for product page editing. Developers can use dynamic sources to add standard metafiles or known source properties as defaults.
Metafiles with improved functionality
Storeowners can now add metafiles or properties to their theme editor without having to use an app. The merchant can now add any content to product pages.
Metafiles can be used to add the item if it does not appear in the core store editor.
For more information about metafiles, see the Shopify official documentation.
These metafiles are very limited in our opinion. We will continue to use Accentuate Metafiles because it’s 1000x better. Shopify didn’t look at the metafiles being used before deploying this one. They are slowly improving, but they are slow…
Files API
Developers can now access the Files API to see what’s in the Settings/files. Apps can upload and choose media content using the GraphQL API. This admin area now allows apps to populate media metafiles and add content.
Apps can also use media files and media that are not directly associated with a product, such as images used in themes.
For more information, see the File API documentation
Modifications to the theme editor
The theme editor has been updated to make it easier to use the improvements for Shopify agency customers.
The editor displays a tree view of all content on any page. The sidebar allows store owners to hide all blocks, except the header and footer which can have hidden but movable blocks.
A store owner can update the hierarchy of a page easily with a structure such as this.
Liquid Input
Shopify 2.0’s new theme editor includes Liquid Input, which allows you to add custom Liquid codes to pages from within the editor. The Liquid setting is very similar to the HTML setting, with one important difference: it will permit merchants access to Liquid variables so they can use storewide and template-specific Liquid objects.
Merchants won’t have to modify a theme’s codes manually, especially if they need to add code to Liquid apps.
These changes allow store owners to take advantage of Online Store 2.0 without having to engage with developers. This allows them to manage their store and build creative solutions that fit their vision.
We believe code should not be left to developers. This is a recipe that leads to broken websites. We are here. It allows people to copy and paste any information they wish.
Tools for developers
Developers can now create apps and themes much easier. What was Shopify 2.0’s biggest change? Shopify now offers a suite of new developer tools that seamlessly integrate with Shopify, allowing for faster development, testing, development, and customization of themes.
Shopify GitHub integration is now available, as well as an updated Shopify CLI tool and Theme Check. Version control is available, which provides a stronger environment for local theme development and smoother development using live linter calibrations for Shopify themes.
What are these tools used for? Let’s find the answer.
Shopify GitHub integration
Shopify now integrates with GitHub to make development easier and track maintenance. Connecting to GitHub allows you to push and pull changes to a repository that is compatible with selected themes.
Collaboration is safer. It is also easier to implement workflows that require changes to themes and merge them on GitHub before they go live.
To learn more documentation, see the GitHub integration.
Shopify CLI 2.0
The Shopify CLI tool has been updated to expand its capabilities. Now, developers can:
- Securely develop, preview, test, deploy, and modify themes.
- Run the theme check-in 2.0.
- You can use test data to create themes. This includes orders, products, and customers.
- Hot-reload CSS or Liquid section edits with the help of the new server.
- You can push or publish themes using the command line.
- To create a new theme for Shopify, use Dawn, the new Shopify theme.
Themes for development
These tools will make it easier for you to get your Online Store 2.0 running as quickly as possible.
Shopify Merchants who are considering switching to Shopify 2.0
It is not possible to update a store’s theme to version 2.0. It is impossible to update themes from older versions to 2.0.
Users will need to port in or redevelop any customizations for the new release. New configurations are required for theme settings.
You probably know that these changes require a Shopify development agency. This is where we step in. It took a while for the new version to arrive, but we are excited to help you make the most of it.
The past six months have seen playing with Shopify 2.0. We are now deploying our first Shopify 2.0 custom builds.
Theme Check
Theme Check is a language server for JSON or Liquid that scans themes and reports any errors. It also brings the Shopify theme and Liquid best practices to the forefront. This tool integrates with text editors such as Visual Studio Code and can identify issues in theme code.
The error messages are easy to identify and include a link that will take you to the documentation.
Theme Check includes Shopify CLI so developers don’t need to install it.
How to upgrade Shopify 2.0
Existing themes won’t stop working, and they will continue to support. Most merchants will find Shopify 2.0 useful. Many store owners will be looking to expand their online stores with Shopify 2.0.
Shopify 2.0 has been in our hands since its release. We welcome any suggestions or feedback. Any functionality can be converted to a 2.0 theme. Contact us today to speak to an Expert.
Read More about Benefits Of Bluetooth Headphones
