Shopify’s Online Store 2.0 is drastically changing the landscape of digital stores. If you’ve been following the evolution of online shopping and the technical aspects behind it, you’ll know that it has been gathering momentum. With Online Store 2.0, themes and theme apps are easier to build than ever before. It is feature-rich, flexible, and simple to maintain.
This guide will show you how straightforward it is to do this so you can migrate a theme to Online Store 2.0. We’ll show you how to move code from a Liquid template file over to a section file and include this section in a JSON template. We’ll also show you how to add support for app blocks. You can do all these steps using the code editor or Shopify CLI.
Once you’ve migrated your theme to Online Store 2.0, you can use and support several features, including:
Read our Online Store 2.0 article for a more in-depth look at the features and benefits.
We know this is exciting, but before you get going, do this:
Once you’ve done this, you’re ready to begin the migration.
Shopify 2.0 features mainly rely on JSON templates. To add support for these features, convert a Liquid template into a JSON template and move any Liquid code or HTML into sections so you can include it in the new template. Here’s how:
Unpublish the theme and make a copy of it. It’s important to unpublish as you’ll be moving files that will impact the storefront. The copy is your backup for reference, or in case you need to roll it back. If you’re using Shopify CLI to edit locally, download the theme files using the theme pull command.
Note down and remove any {% section %} tags. It’s essential to remove these references to move the remainder of the code into a section file, and you can’t have a reference to another section file in a section file. To do this:
After you remove the tags, move the code to a new or existing section. This could be a section that renders a significant portion of code for a page. How to move your code if you have a suitable existing section:
If you want to add your Liquid template code to a new section, follow these instructions:
Once you’ve copied the code, don’t forget to delete product.liquid from the /templates directory. This is because a product.json file will replace it, and the two can’t be stored in the directory simultaneously.
If you’re editing locally, create a new file called product.json in the /templates directory. If you’re using the code editor:
Once you’ve created the product.json file, replace the default code in it with this code:
{Ensure the type property references the name of the section file where you placed the markup of the product template in Step 3.
Save the file
Once you’ve created your template, access it in the theme editor to make sure it renders right. You can do this through Shopify CLI by following these steps:
Take note of the original product.liquid template file. If it previously contained references to other sections, you should define them in the product.json file and then define their order. This is how:
Your product.json file should look similar to this:
{You can also use the theme editor to add sections or adjust the order of sections.
You can build app blocks with theme app extensions, which is only available as a preview for developers. If you want to allow merchants to add app blocks to theme sections, make these changes to the section code:
You can convert all the sections in the theme by repeating the steps above.
If you get stuck or don’t feel confident about migrating your theme yourself, please give TVP a shout. We are Shopify Experts and can take care of every aspect of your Shopify experience.
After you’ve created a new JSON template based on your Liquid template, it would be a good idea to enhance your theme further. Here are some ideas:
In case you’re still not 100% certain, it’s a great idea to migrate. Shopify 2.0 makes it so much easier to customize sections; it provides enhanced theme developer tools and quicker loading times. Digital retail is rapidly evolving, and it’s crucial to stay at the forefront. With Online Shop 2.0, you can, and with TVP, the migration process is super easy. Talk to us; we have the answers.