If you attended Shopify UNITE 2021, you probably know how the leading eCommerce platform builders announced a number of new features for the business owners, app and theme developers, alike. But if you missed out, don’t fret.
We condensed all the updates available for merchants in a crisp social media post. You can see it here.
But we’re here to talk about the one that definitely has us really excited - Online Store 2.0.
What is Shopify Online Store 2.0?
As Shopify simply puts it, Online Store 2.0 is a set of features and feature improvements that will make themes and apps easier to build, much more flexible and easier to maintain!
Most of Online Store 2.0 features rely on JSON templates, and you can migrate your theme to add support for these features. But to do so, you need to convert a Liquid template into a JSON template, and move any required Liquid code or HTML into sections so that you can include it in the new JSON template.
What do you get by moving to Shopify’s Online Store 2.0?
If you migrate your Shopify theme to Online Store 2.0, the theme can use or support the following list of features:
1. Sections on every page
A new JSON template format is introduced to let you add new and existing sections to most pages of your Shopify theme. You will be able to add and remove sections from any page using the Shopify theme editor directly.
With this new feature, Shopify merchants will be able to personalize many more aspects of their store. It will also enable developers to build maintainable themes with more modular components.
2. Dynamic sources
A dynamic source refers to an attribute that updates to reflect its context. It can be an object attribute or a custom metafield attribute. With Online Store 2.0, merchants will be able to connect dynamic sources to settings in the themes they’re making use of.
You can also introduce the standard metafields as default settings in your Shopify theme with this update. This will make your theme components more flexible and reusable.
3. App blocks
Themes that move to Online Store 2.0, will be able to add support for app blocks built with theme app extensions; which is an app development framework that lets you add an app to a theme, or update an app without hampering or changing the theme’s code.
With Online Store 2.0, the code is packaged in modular app blocks. You will be able to control the app using the Shopify theme editor. And when you uninstall the app, the app code is removed with it; making it easier to support and troubleshoot your theme.
How to migrate your Shopify theme to Online Store 2.0?
Step 1: Identify the theme you want to migrate
First things first, identify the Shopify theme you want to migrate. This is especially important if you have multiple themes; so that you can focus on moving one.
Step 2: Back up the theme
After you identify the Shopify theme you want to migrate to Online Store 2.0, ensure you make a copy of it.
If you're editing the theme using the code editor, then simply duplicate the theme. You also need to make sure that the theme is unpublished while you're editing it. This is to ensure that your live storefront does not get impacted.
Step 3: Identify sections and remove section references
To begin converting your Liquid template into a JSON template, you must closely take note of and remove {% section %} tags.
You will have to remove these references so that you can move the rest of the theme code into a new section file; and section files cannot contain references to other section files.
For doing this, follow these steps:
- Open your theme in the code editor or your local development environment
- Locate the product.liquid file in the /templates directory
- Search for any {% section %} tags where sections are being included
- Note their names and where they are located
- After you've found any {% section %} tags and made a note of their location, delete the tags from the product.liquid file
Step 4: Move code from the template into a section
After you remove the {% section %} tags from the template code, you need to figure out where to move it. Here you have two options to go for:
Option 1: Add code to an existing section
You might already have a section that renders a large portion of the code for a page in your Shopify theme. In this case, follow these steps:
- 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 {% schema %} tags in the code
Option 2: Add code to a new section
If none of the existing section files in your Shopify theme are appropriate, then you can create a new section. To host your Liquid template code in a new section, follow these steps:
- Create a new file in the /sections directory
- If you're creating the section through the code editor, then delete the placeholder code for the section
- After you create your new section file, copy the remaining code from the product.liquid file
- Paste it into the empty section file
Step 5: Delete the Liquid template file
After you have copied the code from product.liquid, make sure you delete product.liquid from the /templates directory of your Shopify theme. This is because the same file cannot be stored in two places at the same time.
Step 6: Create a JSON template file
After the product.liquid file has been deleted, you can create the replacement JSON template for your theme. Follow these steps to do so:
- Create a new file in the /templates directory called product.json:
- If you're using the code editor:
- Select Add a new template
- From the Create a template for, go to the drop-down menu, choose Product
- Select JSON as the template type
{
"name": "Product",
"sections": {
"main": {
"type": "product-template"
}
},
"order": [
"main"
]
}
Save the file before you move out of the editor.
Step 7: Test the template
After you have created your new template, open it in the theme editor to see if it renders correctly.
Here’s what you need to do:
- In a terminal, type shopify login --store <DOMAIN>, where <DOMAIN> is the store that you want to log in to
- Click the link to finish the login process
- Navigate to the working directory for the theme
- Type shopify theme serve
- The serve command returns a link to the Shopify admin theme editor
- Open the theme editor and navigate to a product page
- Click on the Add Section button that appears in the left sidebar
- This should now display all the sections that were previously accessible only from the home page
Step 8: Add references to the sections
If your original product.liquid template file contained references to additional sections, define those in the product.json file as well. Then, define their order.
- Open product.json. The file currently references only a main section, the section that contains your migrated code
- Add additional sections using this structure. For instance, you can add a reference to a section that needs to display product-recommendations
- Define the order in which the sections appear
Step 9: Add support for app blocks to sections
Furthermore, if you want to be able to add app blocks to sections in your theme, your theme developer will need to make the following changes to your section code:
Migrating your Shopify theme to Online Store 2.0
Seems like a lot to do to be able to leverage a few new features right?
Well, when Apple rolls out an iOS update, don’t you update your software to overcome the little bugs you have been facing and to get access to more advanced features?
It is much the same for your Shopify store.
Moving to Online Store 2.0 is like upgrading your Shopify store theme to be able to do more with the storefront you present to your customers.
The sooner, the better.
Want to know more about Online Store 2.0 and how it impacts your theme? Let’s talk!
Frequently asked questions
Does Shopify 2.0 cost more?
Online store 2.0 is built to replace the current way Shopify stores work. So if you have an active Shopify store with a paid plan and compatible theme, online store 2.0 is completely free of charge and included within your plan.
What is the difference between Shopify 1 and 2?
Shopify sections are customisable areas or blocks that give online store owners the flexibility to design pages as per their need. In 1.0 these modular blocks were only available to use on the homepage. But with 2.0, they're available across your entire store.
Is Shopify 2.0 better?
Shopify 2.0 is definitely faster and more efficient. This means that it can handle more traffic and transactions without slowing down.