How to Migrate a Shopify Theme to Online Store 2.0

If you attended Shopify UNITE 2021, you probably know how the leading eCommerce platform builders announced a number of new features for the business owners, app and theme developers, alike. But if you missed out, don’t fret. 

We condensed all the updates available for merchants in a crisp social media post. You can see it here

But we’re here to talk about the one that definitely has us really excited - Online Store 2.0. 

What is Shopify Online Store 2.0?

As Shopify simply puts it, Online Store 2.0 is a set of features and feature improvements that will make themes and apps easier to build, much more flexible and easier to maintain! 

Most of Online Store 2.0 features rely on JSON templates, and you can migrate your theme to add support for these features. But to do so, you need to convert a Liquid template into a JSON template, and move any required Liquid code or HTML into sections so that you can include it in the new JSON template.

What do you get by moving to Shopify’s Online Store 2.0?  

If you migrate your Shopify theme to Online Store 2.0, the theme can use or support the following list of features: 

1. Sections on every page 

A new JSON template format is introduced to let you add new and existing sections to most pages of your Shopify theme. You will be able to add and remove sections from any page using the Shopify theme editor directly. 

With this new feature, Shopify merchants will be able to personalize many more aspects of their store. It will also enable developers to build maintainable themes with more modular components. 

2. Dynamic sources 

A dynamic source refers to an attribute that updates to reflect its context. It can be an object attribute or a custom metafield attribute. With Online Store 2.0, merchants will be able to connect dynamic sources to settings in the themes they’re making use of. 

You can also introduce the standard metafields as default settings in your Shopify theme with this update. This will make your theme components more flexible and reusable.

3. App blocks 

Themes that move to Online Store 2.0, will be able to add support for app blocks built with theme app extensions; which is an app development framework that lets you add an app to a theme, or update an app without hampering or changing the theme’s code.  

With Online Store 2.0, the code is packaged in modular app blocks. You will be able to control the app using the Shopify theme editor. And when you uninstall the app, the app code is removed with it; making it easier to support and troubleshoot your theme.

How to migrate your Shopify theme to Online Store 2.0? 

how to migrate theme to online store 2.0

Step 1: Identify the theme you want to migrate 

First things first, identify the Shopify theme you want to migrate. This is especially important if you have multiple themes; so that you can focus on moving one. 

Step 2: Back up the theme

After you identify the Shopify theme you want to migrate to Online Store 2.0, ensure you make a copy of it. 

If you're editing the theme using the code editor, then simply duplicate the theme. You also need to make sure that the theme is unpublished while you're editing it. This is to ensure that your live storefront does not get impacted. 

Step 3: Identify sections and remove section references 

To begin converting your Liquid template into a JSON template, you must closely take note of and remove {% section %} tags.

You will have to remove these references so that you can move the rest of the theme code into a new section file; and section files cannot contain references to other section files. 

For doing this, follow these steps: 

  1. Open your theme in the code editor or your local development environment
  2. Locate the product.liquid file in the /templates directory
  3. Search for any {% section %} tags where sections are being included
  4. Note their names and where they are located
  5. After you've found any {% section %} tags and made a note of their location, delete the tags from the product.liquid file

Step 4: Move code from the template into a section

After you remove the {% section %} tags from the template code, you need to figure out where to move it. Here you have two options to go for: 

Option 1: Add code to an existing section

You might already have a section that renders a large portion of the code for a page in your Shopify theme. In this case, follow these steps: 

  1. Open the section file where you want to add the template code
  2. Copy the remaining code from product.liquid
  3. Paste the code into the section file above the opening {% schema %} tags in the code

Option 2: Add code to a new section

If none of the existing section files in your Shopify theme are appropriate, then you can create a new section. To host your Liquid template code in a new section, follow these steps: 

  1. Create a new file in the /sections directory
  2. If you're creating the section through the code editor, then delete the placeholder code for the section
  3. After you create your new section file, copy the remaining code from the product.liquid file
  4. Paste it into the empty section file

Step 5: Delete the Liquid template file 

After you have copied the code from product.liquid, make sure you delete product.liquid from the /templates directory of your Shopify theme. This is because the same file cannot be stored in two places at the same time. 

Step 6: Create a JSON template file

After the product.liquid file has been deleted, you can create the replacement JSON template for your theme. Follow these steps to do so: 

  1. Create a new file in the /templates directory called product.json:
  • If you're using the code editor:
  1. Select Add a new template
  2. From the Create a template for, go to the drop-down menu, choose Product
  3. Select JSON as the template type
  • If you're editing the theme locally, then create a new file called product.json and save it in the /templates directory

  • After you create the product.json file, replace any default code inside this file with the following:

    {
  •   "name": "Product",

      "sections": {

        "main": {

          "type": "product-template"

        }

      },

      "order": [

        "main"

      ]

    }

    Save the file before you move out of the editor.  


    Step 7: Test the template 

    After you have created your new template, open it in the theme editor to see if it renders correctly. 

    Here’s what you need to do:  

    1. In a terminal, type shopify login --store <DOMAIN>, where <DOMAIN> is the store that you want to log in to
    2. Click the link to finish the login process
    3. Navigate to the working directory for the theme
    4. Type shopify theme serve
    5. The serve command returns a link to the Shopify admin theme editor 
    6. Open the theme editor and navigate to a product page 
    7. Click on the Add Section button that appears in the left sidebar 
    8. This should now display all the sections that were previously accessible only from the home page 

    Step 8: Add references to the sections 

    If your original product.liquid template file contained references to additional sections, define those in the product.json file as well. Then, define their order. 

    1. Open product.json. The file currently references only a main section, the section that contains your migrated code
    2. Add additional sections using this structure. For instance, you can add a reference to a section that needs to display product-recommendations 
    3. Define the order in which the sections appear

    Step 9: Add support for app blocks to sections

    Furthermore, if you want to be able to add app blocks to sections in your theme, your theme developer will need to make the following changes to your section code: 


    Migrating your Shopify theme to Online Store 2.0

    Seems like a lot to do to be able to leverage a few new features right? 

    Well, when Apple rolls out an iOS update, don’t you update your software to overcome the little bugs you have been facing and to get access to more advanced features? 

    It is much the same for your Shopify store. 

    Moving to Online Store 2.0 is like upgrading your Shopify store theme to be able to do more with the storefront you present to your customers. 

    The sooner, the better. 

    Want to know more about Online Store 2.0 and how it impacts your theme? Let’s talk