Shopify 2.0

A Comprehensive Guide for New Users.

In June of 2021, Shopify released Online Store 2.0. This release is for all shop owners, offering numerous advantages for owners willing to take the plunge. If you are a Shopify store owner wondering how and why Shopify 2.0 is for you, this article will help you.
Below, we will go through the updates to Shopify, the benefits of the new version, and how to migrate your apps and themes over. 

What are the Biggest Changes with Shopify 2.0?

The most significant change for Shopify 2.0 came from updating the site editor. Updates occurred to the Shopify App store and the site editor. There is also easier uploading of product information.
Below, we will go through each section: 

#1: More Flexible Customization Options

Shopify has an upgraded theme architecture, resulting in greater flexibility in customization. The most significant part of this comes back to customizations on each page.
Before the June update, developers found creative workarounds and custom apps for page-specific custom options. While the home page had more flexibility, the product pages (and others) required knowledge of code edits. 

The theme editor takes a more modulated approach, bringing it closer to editors with more comprehensive website editing options. This update prevents you from modifying pages with advanced custom fields, requiring less code editing knowledge. 

“Modulated” refers to different website sections within blocks. These blocks can contain product descriptions, applications, or other website features. The new drag-and-drop interface creates a much more user-friendly experience, giving you great control over all pages. 

#2: Reopening of the Shopify Theme Store

Shopify is reopening access to the Shopify Theme Store with this greater customization. Before late June, partners could not submit new designs. The store has been closed since 2018, so this update will shake things up a bit.

To submit themes to the theme library, you need to be part of the Shopify Partner program. We will discuss how you can do this later.
Payment for submitting this will be a $99 one-time submission fee and a 2.9% processing fee on all transactions. Unless you make more than $1 million on themes, Shopify will charge no additional costs to you. 

#3: Easier App Integrations for Developers & New Shopify Developer Tools 

Using the app blocks mentioned earlier, you can integrate an application on any Shopify page. This integration means you do not have to find creative code-based workarounds for Shopify’s system. 

There are three aspects of this update worth discussing:

• Shopify Github Integration
• Updates To The Shopify CLI Tool
• Test Themes and Theme Check Updates 

If you are a web developer who doesn’t use GitHub, get it now. Connecting your GitHub user accounts allows your app to be checked against all themes across Shopify.
The benefit is that if you have numerous complaints related to themes, you can efficiently run tests within them to see what needs changing. If you are a developer (or have a developer working for you) working directly on a merchant store, this ensures you can make all necessary updates without checking errors on a site in live mode. 

If you use Node.js or Ruby on Rails for app extensions, Shopify’s CLI updates allow much of the same thing. Both updates provide better user experiences, so shoppers don’t leave because your website looks broken.

Everything is done through a more straightforward test environment, allowing you to understand errors using integrated Theme Check. You should run this program on developmental themes, where the CLI automatically produces a test page for you.
This test page improves the experience for merchants who don’t want to see their site break because of faulty code. 

#4: A New Default Theme 

With these new custom theme adaptations, Shopify had to improve theme development. They did this through an update to the current default theme called “Dawn.” Dawn has semantic markup using HTML and CSS to create a quick loading speed for visitors. 

There are no external theme files, making it much better than “Debut,” the previous default theme choice. Dawn works well for developers who are learning Shopify 2.0. It comes with some default JSON templates, which you can use to unlock different theme sections. 

Another part that improves this speed is the lack of JavaScript elements. This improvement is a concerning approach to sellers who have revenue from legacy browsers (Internet Explorer) users. However, the “only-as-needed” approach to JS makes it more suitable for modern browsers. 
Check out Dawn’s custom-liquid section under “theme features” to find out more about the customization of this new theme. 

#5: Meta field Updates 

For Shopify users, meta fields allow merchants to add specialized information. For example, Shopify’s core product descriptions do not contain a field for instructions. You could add that field to teach people how to use your product. 
These fields have gone through a significant update allowing for more flexibility. You can also integrate Storefront API and Liquid to reduce the necessary use of custom code. 

There are also more standard metafields, allowing for easy use of custom themes. This meta field improvement provides greater flexibility for different eCommerce sellers, allowing integrations with those unique storefronts. 

Much of this comes back to the use of less code, allowing for these standard meta field updates to integrate with Shopify’s theme design tools. Those who like WordPress (or Wix or Squarespace) modular design choices will find this to be an eCommerce-centric form of categorization. 

Here are some of the common meta field data types for your understanding:

• Color 
• Date (for adding expiration dates)
• Date & time (to add launch dates
• Weight
• Volume (capacity of your thermos or container)
• Rating
• Product Variants 
• JSON (adding a table of items like materials used to make your products)

#6: Files API and File Picker

Shopify’s API tools include a variety of code options. Its two latest updates are related to the file picker and the Files API. 

API (or application program interface) is a method where developers can create programs with access to specific data sets. For example, the Shopify Themes API enables you to control various elements of your storefront programmatically. 
The Files API enables the simple uploading of media to your preferred product pages. This tool allows programmatic uploads to your product pages based on different factors. 

The example Shopify shows through the file picker has a regularly available warranty spread across multiple pages. This feature prevents you from uploading these files onto numerous product pages individually. 

Files API allows for the current fields:

• File.alt – describing the contents of a file
• File.createdAt – the date and time you created the product
• File.fileErrors – – errors found on the file
• File.fileStatus – The current status of the file 
• File.preview – Preview image for the product

Using the Shopify developers page, you can learn the format of these files. These fields enable you to create situational responses for everyday sellers. 
Shopify 2.0 has numerous opportunistic updates for the usage of files and media not directly associated with any product. Sizing charts and warranties are two great examples. 

#7: Better Theme App Extensions and App Blocks 

The addition of App bocks is a unique aspect for merchants on the platform. These blocks are part of the new and modular theme editor interface. 
Simply put, you can apply apps within themes and test them with enhanced site staging features. Previous to the update, themes integrated with your store under the app developer’s terms. 

With the Theme App Extensions update, you can employ dynamic content elements on your site. This update allows developers to create powerful, page-specific apps with specialized uses. 
This feature also allows you to break down the app page-by-page. This feature means that if you introduced an app error to the theme, you would have one page impacted, not your entire website.  

Shopify recommends you clone their product review app from GitHub to see this in action. Experimentation will be crucial, so you will want to create a test environment using Dawn to familiarize yourself with these updates. 

How To Move Your Themes and Apps to Shopify 2.0 [Step-By-Step Guide]

You should not take the division to migrate lightly. At this time, Shopify has not made the upgrade mandatory. However, the next decade is likely to change as Shopify tries to integrate legacy users. 
If you are curious about migration, here is a step-by-step process you can use. 

Step One: Do Your Research

Before you begin the migration process, it is essential to do your research. No two migrations look alike, and yours might be weird depending on these factors:

• If your site has a large amount of third-party code, you will need help from an external developer. Shopify’s experts cannot help you integrate new features using someone else’s custom work. 
• Familiarize yourself with Shopify’s design policy before planning the move. This document will tell you if you need to think of alternative solutions for code-based edits you had in your vintage theme. 
• Shopify’s team will require you to perform the initial store setup before they help you. The company might suggest you try a more suitable theme, which will cost money. 
• You should review the Shopify community forums to see common issues.
• Announce when you plan on performing the transfer on your social media pages.
• Contact your email list in the event this change goes through. Leveraging the help of your current shoppers is a great way to start identifying problems.  

New updates almost always cause some hair-pulling issues. The better you prepare, the more creative integrations of non-code-based responses you can implement. This act will save you time and money. 

Step Two: Download a New Theme

When you decide on downloading a new theme, you have one of two options:

• See if there is an update to your current one
• Find a theme that appeals to you in the Online Store 2.0 collection. 

OS 2.0 currently has three pages worth of options for your display settings. It isn’t a vast array of opportunities for improving your layout, but it is a start.
You’ll need to make a minimum investment of $150 to upgrade to a 2.0 online store using one of these themes. This cost is typically why many users have delayed the upgrade process. Nobody wants to pay between $150 to $400 in addition to their current fees.

Your alternative option is to update your themes. An updated version costs nothing additional, so this might be your option. If your preferred developer hasn’t released an update, reach out to them about their plans. 

Unlike Shopify 1.0, 2.0 updates will not apply when switching to different versions. If you are using a third-party theme developer, you’ll want to contact them directly. 
If the developer shows no updating plans, you’ll need to do it yourself. We will discuss manually moving themes a bit later. Shopify does allow you to hire experts to resolve this matter if you do not have an on-staff developer. 

Step Three: Backing Up Your Current Store

After picking a new storefront, you do not want to apply it mindlessly. Instead, you’ll want to back up your old one through the following process:

1. Go to your Shopify admin page22.
2. Go to the “themes” section under “online store”
3. Select “actions” and “duplicate”
4. Name the copied “copy of” to identify it from your original

Despite the best plans, migrating anything from point “a” to point “b” can be a headache. Having your store break without a backup is a nightmare scenario.
Performance issues and accessibility problems might cause your shopper count to drop. In this case, you might need to delay the release of your 2.0 plans. Having your store backup ready will transform this catastrophe into a hiccup.  

Step Four: Testing Your Apps on the New Store

Before finalizing the transfer, the last step you need to perform is to test your current applications. If you have a developer on staff, they likely have access to the partner dashboard to do this. 

If they do, have them log in and use the following process:

1. Click “apps” in your partner dashboard and select your app
2. Select “more actions” and “test on development store”
3. Select the development store that matches your 2.0 theme.
4. Click on “install app”

You must use the Billing API to test a payment app (like a checkout app). To ensure your developer doesn’t bill your store, be sure to change all the app’s charge requests to “test”: null. 
All new Shopify apps are block-based; integration with any designs should be simple. However, you should always test your payment system whenever installing and using any payment-based apps.

Step Five: Converting Your Templates and Moving Them Manually (Developer Tips)

After running through some tests and making sure everything works, you can begin the migration process. The manual process starts here, so you might want to hire help if code intimidates you. 

You will need to disable the live storefront during this phase. This temporary disablement is where the announcement on social media matters, as you’ll need to unpublish to get started. Otherwise, people might think your store is closed. Also, install the Shopify CLI before you begin; you will need it to get started. 

Start by looking up the “section” templates found in the product.liquid file under “/templates.” You will either need to add the code to an existing section above your schema tags or create a temp section file to store the code. 

After, you can create a JSON template file (what 2.0 uses) called product.json. This guide will provide you with info on what code you need to write for the template file. You will need to reference the new location you placed the section code in your new template file. 

You can test your theme by typing “shopify theme serve.” After doing this, you can move on and insert your references under the “type” property. You will need to do this for all sections in your theme, but this process should enable you to use a migrated theme fully. 

Check out Shopify’s dev page for more details on this process. 

Benefits of the Shopify 2.0 Update

Despite the somewhat complex process needed to move things over, the overall package is a fantastic upgrade. Below, we will let you know about the benefits of this new release. 

Benefit #1: Developers Pay 0$ To Shopify for First $1 of Sales

Much of the massive opportunities that Shopify Unite’s update brings to the table comes back to developer bonuses. Whether you are developing apps or themes, Shopify’s revenue cut is reduced to 0% until you make $1 million.

There are tremendous opportunities for developers on Shopify now. However, those who have already made $1 million are also receiving a reduced revenue share to Shopify of 15% (down from %20).
The developer-centric focus primarily benefits smaller developers. However, $1 million is a lot of money to be made on Shopify. So regardless, it is an excellent deal.

Benefit #2: Faster Loading Times for Store Pages

Google has placed a high emphasis on page loading speed. While it might not affect all Shopify stores, the increase in speed might save some in the rankings. 
Shopify Unite boasts page loading speeds that are 35% faster across the board. This feature will reduce bounce rate if page speed is an issue for your site. 

Benefit #3: A Better Checkout Experience

Shopify is improving the payout experience for both sellers and buyers. They are doing this through two methods with the latest update:

• Offering more payment methods
• Providing a “buy now pay later” option

Having more payment methods will come from the Shopify checkout app extensions. Typically, these are limited to sending personalized messages and different shipping methods. 

The latest update will eventually allow for the following:

• Customizable content and UI for your checkout screens
• The ability to capture additional information (such as with personalized items) during checkout
• Better control over custom discounts
• Buyer information validation (confirming the information is correct before processing)

The second option comes from allowing US-based sellers to use Shop Pay Installments. This feature has no impact on the credit scores of your shoppers and will enable them to split their payments into four chunks.
This new installment option is with Affirm, a large-scale provider of split payments. You must pass an eligibility check before you can use Affirm. 

Benefit #4: Personalized App Recommendations

Given the increasing size of the Shopify App Store, it is becoming increasingly difficult to find the app to improve your customer’s online store experience. 

With updates to the builder tools, the app store has also taken a complete change. This improvement goes beyond having apps offer block content. Instead, it involves a more competent recommendation system. 
The pre-2.0 era contained a lot of apps, but the new store is showing marked improvements.  

Conclusion – Is The Shopify Online Store 2.0 Update Worth It? 

As a Shopify seller, it is tempting for you to remain with the former theme. It’s already established, you know how to use it, and you already have your block of content set up for your store. 
While Shopify is still providing ample support for legacy stores, there will be a time that support is no longer available. Besides, several exciting features come with the latest update. 

The transfer process might be a pain if you own a large store. However, Shopify newbies will find getting a new theme and setting up pretty easy. In either case, moving your store over has more than a few benefits. 
We hope this article helps you understand the Shopify Online Store 2.0 update.
Thanks for reading.