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.
1. More adaptable
2. Standard meta fields
3. Presentation hints
Shopify 2.0. Migrate step by step
Let’s review the process of transitioning your Store to Shopify in more detail.
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.
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.
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.
After you delete the file product. Liquid you can replace it with a JSON template.
“name”: “Product” template name
“type”: “product-template” this property must specify the name of the section we are using. See step 2.
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.
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.
You can repeat all steps to transfer all templates.
