How to Upgrade Shopify 1.0 Theme to 2.0

Online Store 2.0 is a set of features and feature improvements that make themes and theme apps easier to build, more flexible, and more maintainable. Before you start, Identify the theme that you want to migrate.

Step 1: Back up the theme

After you identify the theme that you want to work on, make a copy of it.

If you’re editing the theme using the code editor, then duplicate the theme. Make sure that the theme is unpublished while you’re editing it. This is because you’ll be removing files from the theme, which would impact the live storefront.

If you’re editing the theme locally using Shopify CLI, then download the theme files using the shopify theme pull command.

Step 2: Identify sections and remove section references

To start converting your Liquid template into a JSON template, you must make note of and then remove any {% section %} tags.

Step 3: Move code from the template into a section

After you remove the {% section %} tags from the template code, you need to decide where to move it. You can move this code to an existing section or a new section.

Step 4: Delete the Liquid template file

After you copy the code from liquid, delete liquid from the /templates directory. This is because it will be replaced with a json file, and a liquid and json file can’t be stored in the /templates directory at the same time.

Step 5: Create a JSON template file

After the liquid file has been deleted, you can create the replacement JSON template.

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


{
"name": "Product",
"sections": {
"main": {
    "type": "product-template"
}
},
"order": [
    "main"
]
}

The type property should reference the name of the section file where you transferred the markup of the template file

Save the file.

Step 6: Test the template

After you create your new template, open it in the theme editor to make sure that it renders correctly.

Step 7: Add references to sections

If the original liquid template file contained references to additional sections, such as a product recommendations section, then you can define these within the json file, and then define their order.

{
"name": "Product",
"sections": {
"main": {
    "type": "product-template"
},
"recommendations": {
    "type": "product-recommendations"
}
},
"order": [
"main"
]
}

Step 8: Add support for app blocks to sections

If you want to let merchants add app blocks to sections in your theme, then you need to make the following changes to your section code:

  • Add the necessary schema
  • Render the block content

You need to make these changes for every section where you want to support app blocks.

To render an app block in your theme, check for the appropriate type, and then render the block using a {% render block %} tag. You can add this code wherever it makes sense for your section.

Step 9: Repeat the process

You can repeat the process above to convert all of the sections in your theme.

See More: API Integration With Shopify 

Leave a Reply

Your email address will not be published.