Convert Old Shopify Theme Into Shopify 2.0

To convert an old (vintage) Shopify theme to Online Store 2.0, turn each Liquid template into a JSON template: move the template’s code into a section in the sections folder, then replace the .liquid template with a .json template that lists that section. JSON templates are what let merchants add, remove and reorder sections on any page in the theme editor.

Steps to convert a Shopify theme to 2.0, template by template

1. Remove the {% section %} tags from the template.

2. Move the code around those {% section %} tags into sections of its own.
For example: {% section 'product-faqs' %} will now be product-faqs.liquid under SECTIONS

3. Replace the Liquid template with a JSON template.
For example: page-faq-template.liquid will be page.faq.json

4. Add references to the sections in your new JSON template.

Example: a JSON template for a contact page

This is templates/page.contact.json. It renders one section, the file sections/page-contact-template.liquid:

{
  "sections": {
    "main" : {
      "type" : "page-contact-template"
    }
  },
  "order": [
  	"main"
  ]
}

sections lists the sections on the page, each under an ID you choose (here main), and type is the section’s file name without .liquid. order sets the order in which the sections render. A JSON template can’t contain markup itself, so everything the page shows has to live in a section. The layout file theme.liquid isn’t a template, so it stays a Liquid file, and site-wide code in it, such as a script for removing trailing zeros from Shopify prices, can stay where it is.

If you’d rather not convert an older theme yourself, moving it to Online Store 2.0 sections is part of my Shopify development work.

Related articles

• adding a menu picker to a section’s schema: section settings merchants can change in the theme editor
• infinite scroll on Shopify collection pages: a theme edit that depends on how your collection template is built