One of the new updates introduced at this year’s Shopify Unite was ‘Online 2.0’ – a revamped platform full of new tools and themes for owners and developers of ecommerce stores.
WHAT IS NEW AT ONLINE 2.0?
The revised online store uses a new language to build templates called ‘Liquid language’ and is designed to make life a lost easier by allowing customised features to be added to store homepages and other key pages in more user-friendly manner.
The key new features of 2.0
- Improved theme editor – Revamped to centralise all features and functionalities of an online store, so that building homepages, adding themes and managing apps contained within themes is more straightforward.
- Updated theme infrastructure – Customising online storefronts is made easier with 2.0’s updated architecture. Online store owners won’t need to use complicated procedures to re-platform and customise.
- New developer tools
- More visible platforms – With 2.0, Shopify is working towards making platforms more visible to developers and the larger tech companies.
LET’S EXPAND ON SOME OF THESE FEATURES
Improved theme editor
1. Tree display view – The editor now shows a tree display of all the content on each webpage. This is presented in a sidebar from which blocks can be concealed (except headers and footers). By using the tree view, making edits to the content order is much easier.
-
Liquid setting – This input setting is new in the editor enabling online store owners / developers to add liquid code to pages straight from the editor. This function means that manually entering theme coding won’t be needed as much especially when it comes to adding code for liquid-specific apps.
3. Metafield enhancements – These improvements means that metafields and properties can be added without using APIs and having to write code. So, adding relevant content to a product page is easier and the content, that is not needed in the core store editor, can be inputted using metafields.
Overall. the updated metafields are more flexi and include standard metafields which enable custom themes to work more consistently across store themes and markets. Presentation hints can also be added reducing the need for software code.
The new metafields can also take media like images or PDF files via a file picker. So, again there is no need for coding these assets into a theme, and the filer picker makes it super easy to select the media and then upload onto product pages.
Lastly, the improved metafields have a new ‘files API’ which makes documenting and accessing content / media saved in your files super easy. Called a GraphQL API, this function allows apps to access this content and upload it.
Updated theme infrastructure
The new way 2.0’s theme architecture works is that it allows ecommerce store owners / developers to add features to each new page, and not just a homepage like in the version before.
A JSON template file, which defines the page's parameters, now supports the templates for each store page. This template is super flexible allowing developers or online merchants to list all the sections of a page, collection pages, customised pages, blogs and so forth.
How apps integrate with the online storefront has also been improved. Before 2.0, it was hard for developers to build features that worked steadily across all themes. Now theme app extensions have been added into the mix allowing apps to be extended into merchants’ themes through ‘app blocks’. These allow UI components to be built or added, removed or organised through the theme editor without needing to fiddle with the main theme code.
Hosting and managing all assets is also undeniably easier, for example, being able to add an app’s assets to a theme app extension via fast hosting via Shopify’s CDN. Referencing these assets inside the theme extension’s app blocks is also a breezy task.
New developer tools
Online store 2.0 comes with new developer tools to give ecommerce store owners / developers opportunities to create new apps and themes. These tools assist with developing, testing and using new themes.
Summary
The online 2.0 store really is a great upgrade designed to make it easier for all ecommerce store owners / developers to build, customise and increase revenue. This ecommerce platform blog will give you even more information on the 2.0 upgrades.
MIGRATING OVER TO 2.0 – WHAT YOU NEED TO KNOW
If you are reading and have got this far, you’re probably already itching to jump on to 2.0 and make use of these improvements. Here’s where you should plan to migrate or sit down with your developer to discuss moving soon and enjoy the flexibility of this platform.
Migrating over means transferring a liquid template into a JSON template and moving any coding and HTML into sections to incorporate into your new JSON template.
Here are the key migration steps to take:
1. Pick theme and save it
First choose a theme and then copy it. Use the code editor to edit the theme if you need to, but make sure it is not active (unpublished). By doing this, any changes you make won’t show up on your storefront.
2. Begin converting Liquid template into a JSON template
To do this identify and remove sections and any section references / tags. This is required so that the remaining code can be dropped into a section file. For steps on how to do this go to the Shopify website.
- Move code from the template into a section
After removing all the sections and section references from the template code, decide where to move the code. It can go to the existing or a new section.
-Add code to an existing section
Open the section file where you want to add the template code.
Copy the remaining code from product.liquid.
Paste the code into the section file above the opening tags.
-Add code to a new section
If none of the existing section files in the theme are right, then create a new section to host the Liquid template code.
A new file can be created in the sections directory, like product-content.liquid, or create through the code editor then delete the placeholder code for that section.
After creating a new section file, copy the remaining code from the product.liquid file and paste it into the empty section file.
- Replace the old template with JSON template
First, move the code of the article.liquid to a section file so that the article.liquid can be replaced with article.json.
To do this go to sections directory or folder and create a new section. Name it, so this name can be used for the article JSON template file.
For example call it blog-article.liquid. So, inside this section blog-article.liquid, move all the code from the article.liquid template file and delete the article.liquid.
Go to templates folder and create a new template file and select article and make sure that you select JSON instead of Liquid.
Once the article.json is created, replace its code with the code below:
|
{ "name": "Product", "sections": { "main": { "type": "product-template" } }, "order": [ "main" ] } |
Make sure to save the file.
5. Test the Shopify theme
Open the new template in the theme editor and check if you can add sections to your article template. If you can, then that means you have successfully migrated your template file from Liquid to JSON template.
-
Apply the same steps to the rest of the template files
Summary
Migrating Shopify themes from old to 2.0 is easy, but it can get tricky if you choose a more difficult Shopify theme to move to. If you do choose a different theme, make sure to learn it well, save it and create that duplicate.
In this blog we have not covered the remaining steps of migration, these include adding references to sections and adding support for app blocks to sections. For the guidelines and code go to Shopify here.
