MIGRATE TO SHOPIFY OS 2.0

February 07, 2022

What is Shopify OS 2.0

Shopify has opened up tremendous prospects in the e-commerce market in recent years. They introduced some useful features to the store to improve the experience of both merchants and customers, but this time they're bringing a major update for theme and app developers. This is the largest update Shopify has ever released in the last 15 years. At 2021 Shopify Unite, the entire Shopify community singed with pleasure as the new characteristics of the Online Store 2.0 will revolutionize the platform we know today. The new editor in Online Store 2.0 allows traders to oversee the creation of new page templates, shopping faces and integrate apps in their stores easily. The primary release is the ability to edit any page and not just the homepage! Shopify has also announced a number of new functionalities and capabilities that concentrate on best practices.

Advantages after I update my theme to Shopify 2.0?

Shopify 2.0 allows you various opportunities to enhance the customer experience in the future. They have a lot of new features in the Shopify store for which we have paid a big amount to developers and apps. They come up with new solutions that were available in WordPress, Magento, etc. Now you have a wide scope to build a future store. In this competitive market, we need to update ourselves to satisfy and attract customers to our online store.

  • Sections on every page
  • Theme app extensions with app blocks
  • Improvements to meta fields

            1. More adaptable
            2. Standard meta fields
            3. Presentation hints

  • File picker
  • The theme editor has been improved.
  • Apps for Checkout

 

Shopify 2.0. Migrate step by step

 

Let’s review the process of transitioning your Store to Shopify in more detail.

  1. Choose your theme

Before the start, you should choose the theme to which you plan to upgrade to version 2.0 and create a backup of the theme. We recommend doing this locally using the Shopify CLI, so download the theme files.

  1. Sections{% section %} tags

To start transforming your Liquid template to a JSON template, you should remember which sections you used in the template and how they were placed. Please reference the example of the template’s file Product.Liquid

We should delete tags from files.

After deleting tags { % section % } from template’s code, we should decide where to place it. You can move code into an existing or new section.

  1. Delete template.

After copying code from the Product.Liquid delete Product.Liquid from catalog /templates. It is because it will be replaced with a Product.JSon file and product.liquid file and product.JSon file cannot be kept in catalog /templates simultaneously.

  1. Create a JSON template file

After you delete the file product. Liquid you can replace it with a JSON template.

  • Create a new file (template) in directory /templates with the name product.JSon
  • after you create the file, replace it with any code in file by code given below and save changes:

“name”: “Product” template name

“type”: “product-template” this property must specify the name of the section we are using. See step 2.

 

  1. Test template.

After creating a new template, make sure you upload everything correctly.

Open the theme editor and go to the product page. There should be a button to add a section on the left sidebar. All sections that were previously only available on the main page should now appear in the “Add section” menu.

  1. Add references to the sections

If the source file of the Product.Liquid template contains links to additional sections such as the product recommendations section, then you can define them in the Product.JSon file and then determine their order.

If we open the Product.JSon file. You will find their only main section, which we created above.

Of the sections we remembered above, only one has been added, now you need to add a second section with recommendations. We need to select it from the sections that we can now use for all pages in the left sidebar.

 

Then the structure of the Product.JSon file will change. 

Now you get an opportunity to change sections order.

 

If you want to allow adding of apps’ blocks to a section in your theme, you will need to make the following changes to the section code:

Add the necessary schema

To allow adding apps’ blocks into sections, you will need to add blocks of kind @app to the section’s schema. Blocks of the kind @app are not supported in the static section.

For example, to add apps block’s support to the debut-template of the product, you can add the code provided below. s the section doesn’t contain any blocks, you can add a new bunch of blocks after the schema settings bunch.

 

Render app blocks

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

 

  1. Repeat steps

You can repeat all steps to transfer all templates.