+880 1756-702340 +880 9613-842340

shopifyengine.com@gmail.com

Purbo Kamal Kasna Rangpur, Bangladesh.

JSON Templates for Shopify Theme 2.0

JSON templates allow you to control the look and feel of different pages of the online store using sections. JSON templates are data files that store a list of sections to be rendered, and their associated settings. Merchants can add, remove, and reorder these sections using the theme editor.


Schema

A JSON template accepts only a JSON file with a fixed schema and list of accepted attributes. The root should be an object with the following attributes

Attribute Type Required Description

layout

String

No

  • The default layout is theme.liquid.

  • If specify name, for example full-width then it will render layout/full-width.liquid

wrapper

String

No

The HTML wrapper element for the template’s sections.

sections

Object

Yes

  • An object that uses section IDs as keys, and section data as values.

  • This attribute needs to contain at least one section.

  • Duplicate IDs within the template aren’t allowed.

  • Max 25 sections allowed.

  • Each section can have up to 50 blocks.

order

Array

Yes

  • An array of section IDs, listed in the order that they should be rendered.

  • The IDs must exist in the sections object.

  • Duplicates are not allowed.


The wrapper property

The wrapper property makes it possible to insert HTML tags around all of the sections in a JSON template. You can use the following HTML tags:

  • <div>

  • <main>

  • <section>

Example JSON Schema for wrapper

{
  "wrapper": "div#div_id.div_class[attribute-one=value]",
  "sections": {
    "main": {
      "type": "product"
    }
  },
  "order": [
    "main"
  ]
}

Output of the schema

<div id="div_id" class="div_class" attribute-one="value">
    <!-- product.json sections -->
</div>

Here

  • # : For ID

  • . : For class

  • [key=value] : For various attribute


Section Schema

The sections attribute of JSON templates holds the data for the sections to be rendered by the template.

Example Section Schema syntax JSON

sections: {
  <SectionID>: {
    "type": <SectionType>,
    "disabled": <SectionDisabled>,
    "settings": {
      <SettingID>: <SettingValue>
    },
    "blocks": {
      <BlockID>: {
        "type": <BlockType>,
        "settings": {
          <SettingID>: <SettingValue>
        }
      }
    },
    "block_order": <BlockOrder>
  }
}


Section data explanation

Value Type Required Description

<SectionID>

String

-

A unique ID for the section. Accepts only alphanumeric characters.

<SectionType>

String

Yes

The filename of the section file to render, without the extension. Located at : sections/<SectionType>.liquid

<SectionDisabled>

Boolean

No

Default false. When true, the section isn’t rendered but can still be customized in the theme editor.

<BlockID>

String

-

A unique ID for the block. Accepts only alphanumeric characters.

<BlockType>

String

Yes

The type of block to render, as defined in the schema of the section file.

<BlockOrder>

Array

No

An array of block IDs, ordered as they should be rendered. The IDs must exist in the blocks object, and duplicate IDs aren’t allowed.

<SettingID>

String

String

The ID of a setting as defined in the schema of the section or the block.

<SettingValue>

(multiple)

-

A valid value for the setting.

Example Section Schema JSON

{
  "sections": {
    "main": {
      "type": "product",
      "settings": {
        "show_vendor": true
      }
    },
    "recommendations": {
      "type": "product-recommendations"
    }
  },
  "order": [
    "main",
    "recommendations"
  ]
}

Liquid templates are must be stored in

  • sections/product.liquid

  • sections/product-recommendations.liquid


Must Follow

  • The filename must be a valid theme Template Type.

  • Can add an optional suffix for an alternate template. For example, a product template can be named product.json or product.alternate.json.

  • A template can only exist as a JSON or Liquid template, not both.

  • if product.liquid already exists, then you can’t create product.json.

Share