Migrate your theme to Shopify’s new Online Store 2.0
Shopify has come up with an improvised Online Store 2.0 which has quite a few easy to implement tools, easy to maintain and scalable. You can migrate your theme to add support for these features by converting a Liquid template into a JSON template, and moving any required Liquid code or HTML into sections that you can include in the new JSON template.
So what facilities are availed once you migrate your theme to Online Store 2.0?
- Sections on every page
A new JSON template format of Online Store 2.0 allows you to add new and existing sections to most pages in your theme, and add and remove sections from any page directly in the Shopify theme editor. - Dynamic sources
A dynamic source is an attribute that updates to reflect its context. It can be an object attribute or custom meta field attribute. Developers can connect dynamic sources to settings in their themes. - App blocks
Themes that use this new architecture can add support for app blocks built with theme app extensions, an app development framework that lets you add an app to a theme, or update an app, without altering a merchant's theme code. Code is packaged in modular app blocks that merchants can control using the Shopify theme editor. When an app is uninstalled by a merchant, the app code is removed with it. This makes your theme easier to support and troubleshoot.
Summing up, migrating your theme to Online Store 2.0 will offer you tools which will add more functionalities to your store.
Added functionality and support
After you migrate your theme to Online Store 2.0, the theme can use or support the following features.
Sections on every page
Online Store 2.0 introduces a new JSON template format that lets you add new and existing sections to most pages in your theme, and add and remove sections from any page directly in the Shopify theme editor.
This feature lets merchants personalize many more aspects of a store without relying on a developer. It also lets developers build maintainable themes with more modular components.
Dynamic sources
Merchants can connect dynamic sources to settings in their themes. A dynamic source is an attribute that updates to reflect its context. It can be an object attribute or custom metafield attribute.
You can also introduce standard metafields as default settings in your theme. Using standard metafields can help to make your components more flexible and reusable, or to provide standard templates for certain business segments.
App blocks
Themes that use this new architecture can add support for app blocks built with theme app extensions, an app development framework that lets you add an app to a theme, or update an app, without altering a merchant's theme code. Code is packaged in modular app blocks that merchants can control using the Shopify theme editor. When an app is uninstalled by a merchant, the app code is removed with it. This makes your theme easier to support and troubleshoot.
What you'll learn
In this tutorial, you'll move the code from a Liquid template file into a section file, and then include that section file in a new JSON template. You'll also add support for app blocks to your sections.
This tutorial uses Debut as an example, and moves code from a product.liquid
template file into a product-template.liquid
section file, which can then be included in a new product.json
template.
You can perform all of these steps using Shopify CLI or the code editor.
Before you start
Before you start, do the following:
- Identify the theme that you want to migrate.
- If you want to migrate your theme using your local development environment and Shopify CLI:
- Install Shopify CLI.
- Make sure that you have a collaborator account or a staff account for the store you want to work on, or you're the owner of the store. If you have a collaborator account or staff account, then you must be granted the Manage themes permission or Themes permission for the store. Store owners have these permissions by default.
- Note the URL of the store that you want to work on.
Step 1: Back up the theme
After you identify the theme that you want to work on, make a copy of it.
If you're editing the theme using the code editor, then duplicate the theme. Make sure that the theme is unpublished while you're editing it. This is because you'll be removing files from the theme, which would impact the live storefront. You might also need a back-up copy to reference or revert to later.
If you're editing the theme locally using Shopify CLI, then download the theme files using the shopify theme pull
command.
Step 2: Identify sections and remove section references
To start converting your Liquid template into a JSON template, you must make note of and then remove any {% section %}
tags.
You need to remove these references so that you can move the rest of the code into a section file. Section files can't contain references to other section files.
- 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.For example, in Debut, there are two sections included at the top of the template:
{% section 'product-template' %} {% section 'product-recommendations' %}
The first section tag references the
product-template
section, which contains most of the markup needed to render the product page. That includes the product title, product images, add to cart button, and more.Next is a reference to the
product-recommendations
section, which displays a list of products automatically selected as suggestions for customers. After you've found any
{% section %}
tags and made a note of their location, delete the tags from theproduct.liquid
file.
Step 3: Move code from the template into a section
After you remove the {% section %}
tags from the template code, you need to decide where to move it. You can move this code to an existing section or a new section.
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. For example, in Debut, the product-template
section contains a portion of the code for the product page.
- 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.
Option 2: Add code to a new section
If none of the existing section files in your theme are appropriate, then you can create a new section to host your Liquid template code.
- Create a new file in the
/sections
directory. For example,product-content.liquid
. 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 and paste it into the empty section file.
Step 4: Delete the Liquid template file
After you copy the code from product.liquid
, delete product.liquid
from the /templates
directory. This is because it will be replaced with a product.json
file, and a product.liquid
and product.json
file can't be stored in the /templates
directory at the same time.
Step 5: Create a JSON template file
After the product.liquid
file has been deleted, you can create the replacement JSON template.
Create a new file in the
/templates
directory calledproduct.json
:- If you're using the code editor:
- Select Add a new template.
- From the Create a template for drop-down menu, choose Product.
- Select JSON as the template type.
- If you're editing the theme locally, then create a new file called
product.json
and save it in the/templates
directory.
- If you're using the code editor:
-
After you create the
product.json
file, replace any default code inside this file with the following:{ "name": "Product", "sections": { "main": { "type": "product-template" } }, "order": [ "main" ] }
The
type
property should reference the name of the section file where you transferred the markup of the product template file in step 3. Save the file.
Step 6: Test the template
After you create your new template, open it in the theme editor to make sure that it renders correctly.
To access the theme editor using Shopify CLI:
- 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. An Add section button should appear in the left sidebar. All the sections that were previously accessible only from the home page should now appear in the Add section menu.
Step 7: Add references to sections
If the original product.liquid
template file contained references to additional sections, such as a product recommendations section, then you can define these within the product.json
file, and then define their order.
Open
product.json
. The file currently references only a main section, the section that contains your migrated code.{ "name": "Product", "sections": { "main": { "type": "product-template" } }, "order": [ "main" ] }
-
Add additional sections using this structure. For example, you can add a reference to a
product-recommendations
section.In this example, below the
main
object, you can insert a second object calledrecommendations
. Thetype
property contains the filename of this section:{ "name": "Product", "sections": { "main": { "type": "product-template" }, "recommendations": { "type": "product-recommendations" } }, "order": [ "main" ] }
Define the order in which the sections appear.
For example, you can order the
recommendation
section relative to themain
section.Within the
order
array, addrecommendations
where the section should appear. In this case, the section should appear below the existingmain
section.After you define the order, your
product.json
file should look like this:{ "name": "Product", "sections": { "main": { "type": "product-template" }, "recommendations": { "type": "product-recommendations" } }, "order": [ "main", "recommendations" ] }
When you navigate to the theme editor and select a product page, the product recommendations section should now appear on the page below the product template section.
Step 8: Add support for app blocks to sections
If you want to let merchants add app blocks to sections in your theme, then you need to make the following changes to your section code:
You need to make this change for every section where you want to support app blocks. Learn more about supporting app blocks in your theme.
Enable app blocks in the section schema
To let merchants add an app block to a section, you need to add blocks of type @app
to the section's schema.
For example, to add support for app blocks to the Debut product-template
section, you can add the code below. Because the section doesn't contain any blocks, you can add a new blocks
node after the schema's settings
node.
"settings": [ ... ] "blocks": [ { "type": "@app" } ]
Render app blocks
To render an app block in your theme, check for the appropriate type, and then render the block using a {% render block %}
tag. You can add this code wherever it makes sense for your section.
For example:
{% for block in section.blocks %} {% case block.type %} {% when '@app' %} {% render block %} ... {% endcase %} {% endfor %}
Next steps
After you create new JSON templates based off your Liquid templates, consider enhancing your theme further:
- Make your template more modular - You can extract functionality that existed in the core template code into sections and blocks. For example, you can convert a
Show vendor
checkbox into a block that represents the vendor. Learn some best practices for using sections and blocks. - Connect theme settings to dynamic sources - You can update your theme's default settings to reference dynamic sources. For example, you can reference a product attribute as a default value of a text box. Learn about dynamic sources.
- Add version control to your theme - To make later theme updates simpler, and to track theme changes made in the theme editor, code editor, and more, you can connect your theme to a GitHub repository.
- Explore tools for building Shopify themes - As a part of Online Store 2.0, Shopify released a new suite of developer tools that help you to streamline your theme development and testing process. Learn more about the tools that are now available.
On this page
- Added functionality and support
- What you'll learn
- Before you start
- Step 1: Back up the theme
- Step 2: Identify sections and remove section references
- Step 3: Move code from the template into a section
- Step 4: Delete the Liquid template file
- Step 5: Create a JSON template file
- Step 6: Test the template
- Step 7: Add references to sections
- Step 8: Add support for app blocks to sections
- Step 9: Repeat the process
How much do you have to pay?
Discover the various ways you can collaborate with Dynamic Dreamz. We pride ourselves on being the exclusive web agency that provides various engagement options that are more convenient for you.
Our Shopify Work
Clients Speak Out
Raving reviews from happy clients, their words reflecting the dedication and effort we invest in crafting exceptional user experiences.
Response time and execution is fantastic.
Sanjay and the team are phenomenal. We have been working with Dynamic Dreamz for more than 2 years and their work is amazing. From small changes to larger projects, their response time and execution is fantastic. I would absolutely recommend people to reach out to the team for really cost effective work to be completed on their Shopify Plus stores.
Ella Sendall
Assisted in implementing a complete redesign.
Gaurav has assisted in implementing a complete redesign of our shopify store. The project has included creating custom template pages, a custom built responsive navigation system, extending the product details page to display product specific content blocks.
Kristy Mason
The team delivered excellent service.
The Gaurav & team built our italian clothing Shopify website from scratch. The finished site was exceptional. They produced top-level work in a timely manner and kept me up to date at all times. Furthermore, they communicated well, responded quickly, and came up with solutions for every problem. Overall, the team delivered excellent service.
Lorenzo Colucci
Never failed to deliver updates and finalized tasks within 24 hours.
We have been on the Shopify Plus platform for nearly a year and were looking for a company that would help us with small and medium sized development jobs, after we found larger European agencies to be rather slow and expensive for these kinds of tasks. Gaurav & the team have implemented bug fixes and more elaborate new functionality to our Shopify Plus store. We use Figma and PS to mock up the details and they works with our Designs and have never failed to deliver updates and finalized tasks within 24 hours.
Jonas Burgmann
Undertake the development work and UA testing.
We are always looking to enhance the user experience and conversion rate of our Shopify store. Dynamic Dreamz provides the technical expertise to customise our theme and build custom enhancements. Together we determine the requirements and map out the implementation plan. They then undertake the development work and UA testing.
Nicole Ross
Got Any Question?
Insightful feedback that showcases our commitment to excellence and the satisfaction of our valued clients.