Creating and using JSON templates

In this documentation post, we'll take a look at JSON templates and how to add them to your store.

Note: You don't actually need to be on the latest version of the Palo Alto theme in order to do this. It will work on all themes but our latest version uses JSON templates exclusively.

1

What are JSON templates?

JSON Templates are a new form of template introduced with Shopify's Online Store 2.0 Update. They are extremely powerful and versatile as any page equipped with them will have the same sections as the home page. To new Shopify users, this may not sound like much but to seasoned veterans of the Shopify platform, this is a breath of fresh air and an update we've been waiting for ever since sections were introduced.

They still will not display different content if used on more than one page, but improvements have been made by Shopify in the adoption of meta fields and you will be able to create pages that have the same structure but have different photos and text.

2

How to create a JSON template.

It's actually super simple, quick, and easy to set up a JSON template. All you need to do is log into your Online Store > Themes and click on Actions > Edit code for the theme copy you want to edit. From the Templates folder, you need to click on 'Add new template':

A box will pop up asking what kind of a template you'd like to create and if it should be a JSON or a LIQUID template. For the purposes of this tutorial, we'll create a 'page' template but the process is almost identical for creating product pages, article pages, and so on:

Make sure to also give your template a name that will be easy to remember and that would show its purpose and click on 'Create template'. This will create the template but we still have one final step to go. When the template is created, there will be a small bit of code. You will need to delete it and paste this little snippet in its place:

{
  "sections": {
    "slideshow": {
      "type": "slideshow",
      "settings": {
      }
    }
  },
  "order": [
    "slideshow"
  ]
}

Once you're done, click Save. It could take a few minutes for it to fully load but once it's done, you will find it inside of the Pages tab in your Theme Editors drop-down menu:

3

Creating more templates.

Now that you have one JSON template for pages, you can actually use it to create more right from the theme editor without touching the theme code. All you need to do is open the Pages tab shown above and click on 'Create template':

All you need to do is give the new template a name, select the template it's going to be based on, in this case, it's the one we just created and is selected automatically, and click on 'Create template':

That is it, all that's left is to set them up with sections and assigning them to your pages.

4

Assigning the templates.

To assign a template to any of your pages you need to first publish your copy of the Palo Alto theme. If you've already done that, you can find the option to assign the template to a specific page by going into your Online Store > Pages and opening the page you're looking to edit:

Inside this editor, you'll need to scroll down to 'Theme template' and select the template you'd like to assign:

Once you're done, Save the changes and you're good to go!