Shopify announces its most significant change to date - Shopify Online store 2.0, referring to new infrastructure, tools, and technologies that help you build a flexible store. Below are the new tools and features of Shopify Online Store 2.0:

• Upgraded Theme architecture: With sections available for all pages, merchants like you can unlock a range of new opportunities to personalize and improvise customer experiences.
• Flexible store content: 
• The Theme app extensions with app blocks allow you to easily integrate multiple Shopify apps and remove them without any ghost code left behind. 
• The improved theme editor allows you to add meta values dynamically. That means you can easily add any extra information to the product effortlessly. To learn more, refer to our Shopify 2.0 improved metafields blog. 
• Enhancements to the Theme editor: Instead of drilling down into multiple layers to make the changes, the improved theme editor displays a tree view of all the content on a page in the sidebar. 
• New developer tools: With GitHub integration, upgraded Shopify CLI, and Theme Check tools, you Shopify developers can help you enhance your store development. 
• A new reference Theme: Designed and built to support Online store 2.0 flexibility - Shopify Dawn theme is the first source-available reference theme. You can read more about the theme in our detailed Shopify Dawn theme review blog.

Dive deeper into these announcements of Shopify Online Store 2.0 with our Shopify 2.0 introduction blog. 

Steps to help you get started with Shopify Online Store 2.0?

Before you start to migrate your theme to Online Store 2.0, you need to decide on the theme development tool. If you want to use the improved Shopify CLI, you need to install CLI by following the below commands. 

For Windows:

• Step 1: First, install Ruby+Devkit using RubyInstaller for Windows.
• Step 2: Using the  RubyGems.org package manager, install Shopify CLI. 
• Step 3: Open a new terminal, navigate the home directory, and run the "gem install shopify-cli" command.
• Step 4: To verify the installation, you need to run the "shopify version" command. 

For macOS:

• If you are using RubyGems.org, follow step 3 and step 4 to install and verify. 
• If you are using Homebrew, run the following commands "brew tap shopify/shopify" and "brew install shopify-cli" to install, and for verification, follow step 4. 

Steps to help you migrate a Theme to Shopify Online Store 2.0

To help you select the best Shopify 2.0 themes and understand the theme architecture, we've written a Shopify Online Store 2.0 best themes blog along with Shopify 2.0 theme architecture. Once you have identified the theme you will be working on, kindly follow the below steps

Step 1: Back up the Theme

It is always safer to have a backup option to get lost in the woods. If you are using Theme Development Kit, please duplicate the theme and keep it unpublished. Using Shopify CLI, you can download the theme using the "shopify theme pull" command. 

Step 2: Identify and remove section references

As sections are made available to every page in Shopify Online Store 2.0 by rendering the page type in JSON format, you need to start converting your theme Liquid template into a JSON template.  

• To start converting, you need to remove any {% section %} tags while making continuous notes. 
• Secondly, to remove the references, you need to follow the steps below: 
• Step 1: Locate the file in the /templates directory. In our case, let's consider the product.liquid file.
• Step 2: Search for any {% section %} tags and make a note of their location and names.
• Step 3: Delete the tags from the product.liquid file.

Step 3: Moving the code into the section from the template format

Once you have removed the section tags, you need to decide on where you want to move the template code. 

• To add the code to an existing section, 
• Open your selected section file
• Copy the code from the product.liquid 
• Paste the code above the opening {% schema %} tags in the section file.
• To add code to a new section, 
• First, you need to create a new file in the /sections directory
• Later, copy and paste the remaining code into the empty section file.

Step 4: Delete the Liquid template file

After you are done copy-pasting, you need to delete the product.liquid from the /templates directory as you cant have both product.liquid and product.json files in the /templates directory at the same time.

Step 5: Create a JSON template file

After you are done deleting the product.liquid file, you can create the replacement JSON template by following the steps: 

• Step 1: Creating the file:
• If using the code editor, 
• Select Add a new template.
• From the Create a template drop-down menu, choose the product option.
• Select JSON as the template type. 
• If creating locally, create a new JSON file (in our case, let's assume product.json) and save it in the /templates directory.
• Step 2: After creating the product.json file, replace any default code with appropriate types inside the file.
• Step 3: Save the file.

Step 6: Testing the template 

After creating the JSON template, you can test the changes by navigating to your product page from the theme editor and looking for the "Add section" option. 

To see a model of how Shopify Online Store 2.0 can benefit merchants and Shopify developers this BFCM 2021, take a look at our Shopify 2.0 BFCM benefits blog.  

Step 7: Add references and order of the sections

If your product.liquid template file contains additional sections, you can define these references within the created product.json file and then define their order.

Step 8 (Optional): Add support for app blocks to sections

With the updated theme architecture and introduction of theme app extensions with App blocks, you can leverage this introduction by adding the necessary schema and rendering the block content.

• To render a block content: Check for appropriate type, and then render the block using a {% render block %} tag. 
• To add the app block to a section: You need to add blocks of type @app to the section's schema.

Step 9: Repeat the steps

To convert all of the sections, you need to follow the above step from 1 to step 7 to make your theme compatible with Shopify Online Store 2.0 

How to install Dawn Theme Shopify via Shopify/Dawn Theme GitHub

You can not download the Shopify Dawn theme via Shopify/dawn theme GitHub. To quickly download the Shopify Dawn theme, you can visit Shopify Theme Store and search for the Dawn theme. 

As Shopify/dawn theme GitHub will help you build and track changes to theme code. The Github integration will allow your Shopify developers to collaborate safely with version control when editing themes and share previews of the changes before populating to a live theme. 

Conclusion:

While it is not mandatory for merchants to avail the Shopify 2.0 features, we highly recommend our merchants and others to experience Shopify Online Store 2.0. It offers flexibility to make the changes and gives the options to grow beyond basic.

Suppose you are looking forward to implementing, migrating, or starting with the Shopify Dawn theme. In that case, our Shopify Online Store 2.0 experts can help you leverage the new features, architecture, design styles, and others.