[]

templates

The templates directory contains template files for different theme pages. These template files define the page layout and content display. Two file extensions are supported:

.html: suitable for static pages, with fixed content that does not rely on dynamic data.
.json: suitable for dynamic pages, allowing flexible page structure construction through sections.

Directory structure

The default page template structure of a standard theme is as follows:

templates
├── customers	            			# Folder of customer-related pages
│   ├── account.json						# Account page
│   ├── activate_account.json		# Account activation page
│   ├── addresses.json    			# Address management page
│   ├── company.json      			# Company registration page
│   ├── forgot_password.json 		# Forgot password page
│   ├── login.json        			# Login page 
│   ├── order.json        			# Order details page
│   ├── orders.json       			# Order list page
│   └── register.json     			# Registration page
├── 404.json              			# 404 error page
├── article.json          			# Blog details page
├── blog.json             			# Blog list page
├── cart.json             			# Cart page
├── collection.json       			# Product collection overview page
├── collections_all.json  			# Product collection details page
├── gift_card.html        			# Gift card page (static HTML)
├── index.json            			# Home page
├── page.contact.json     			# Contact us page
├── page.json             			# Custom page
├── page.order_tracking.json 		# Order tracking page
├── password.json         			# Password protection page
├── policy.html           			# Policy page (static HTML)
├── product.json          			# Product details page
├── proofing.html         			# Store closing page (static HTML)
└── search.json           			# Search results page

Template types

Every template file corresponds to a template type, and each template has one or more access paths.

HTML templates

HTML templates are suitable for static pages with fixed content, such as policy pages or store closing pages. The template file extension is .html. You can directly write HTML, CSS, Javascript, and Sline template syntax in these files.

Merchants cannot edit the page content in the theme editor.

JSON templates

JSON templates are suitable for dynamic page templates. The template file extension is .json. These templates adhere to a specific data structure specification to render dynamic section data.

Fields

A JSON template includes the following fields:

Field	Data type	Required or not	Description
layout	string	No	Used to specify the layout file, such as `theme.html`.
sections	object	Yes	Stores the page section configuration data.
order	array	Yes	Stores the section rendering order.

Structure

The structure of a JSON template is as follows:

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

Field description

Field	Data type	Description
<LayoutName>	String	The layout file. The default value is `layout.theme.html`.
<SectionID>	String	The global unique hash string to identify a section, generated randomly.
<SectionType>	String	The section file name.
<SectionDisabled>	Boolean	Whether to show or hide the section. + `true`: show + `false`: hide Default value: `false`
<BlockID>	String	The global unique hash string to identify a block, generated randomly.
<BlockType>	String	The block file name.
<BlockOrder>	String	The list of <BlockID>, to determine the rendering order of blocks.
<SectionOrder>	String	The list of <SectionID>, to determine the rendering order of sections.
<SettingID>	String	The setting ID, defined in schema.
<SettingValue>	String	The setting value, customized by the merchant.

Structure example

The following shows a JSON template example of a password page:

{
  "layout": "password",
  "sections": {
    "main-password": {
      "type": "main-password",
      "settings": {...},
      "blocks": {
        "content": {
          "type": "$content-group",
          "settings": {...},
          "blocks": {
            "heading": {
              "type": "heading",
              "settings": {
                "text": "Opening soon"
              }
            }
          }
        }
      },
      "block_order": ["content"]
    }
  },
  "order": ["main-password"]
}

Multiple template styles supported

To improve the flexibility of page rendering, you can create different template files for the same page type. For example, you can create different template styles for a product details page.

The following parts show some basic steps of creating and applying a new template.

Duplicate the template file

Under the templates directory, copy the product.json file and rename the duplicate as product.shoes.json. The file content is as follows:

{
  "sections": {
    "main-product-info": { ... },
    "recommended-product": { ... }
  },
  "order": ["main-product-info", "recommended-product"]
}

Caution:

Only JSON templates are supported for creating multiple template styles for the same page type.
The template file naming must follow the {template type}.{template name}.json format.

Reorder the sections (optional)

Modify the order field in product.shoes.json to adjust the display order of sections.

{
  "sections": {
    "main-product-info": { ... },
    "recommended-product": { ... }
  },
  "order": ["recommended-product", "main-product-info"]
}

Assign templates

Select the Shoes template for specified products in the SHOPLINE Admin.

Verify the update

Go to the product details page to confirm whether the section order has been updated as expected.

Was this article helpful to you?

SHOPLINE

Legal

templates​