Schema

No-code customisation for your template directly from within the creator panel.

A template schema allows other team members or consumers of your template to change its appearance, for example providing colour pickers to change the colours of your template without the need to edit the CSS or HTML manually. This is especially useful if you are a template designer and you're selling access to your custom template for many different stores to use.

To edit the schema of a template, first open the template editor and select the Change Schema page from the navigation on the left. Any config options you add within the schema will appear within the Appearance section of the creator panel when you click edit on the template.

A great example of Schema in action would be to look at the configuration options available with our default template, Exo, which you can view in the creator panel.

Example Schema

{
  "author": "Tebex",
  "support_email": "[email protected]",
  "config": [
    {
      "header": "Customize Template",
      "options": [
        {
          "id": "nav-style",
          "name": "Navigation Style",
          "description": "Set the location for your navigation.",
          "type": "select",
          "default": "Vertical Nav in Sidebar",
          "values": [
            "Horizontal Nav in Header",
            "Vertical Nav in Sidebar"
          ]
        },
        {
          "id": "server-ip",
          "name": "Server IP",
          "default": "",
          "description": "Enter your server IP - it will be used in the copy server IP section.",
          "type": "textarea"
        },
        {
          "id": "discord",
          "name": "Discord",
          "default": "",
          "description": "Enter your Discord invite url - it will be used in the header Discord section.",
          "type": "textarea"
        }
      ]
    }
  ]
}

Available Config Types

You're able to implement several different types of config options within your template schema, from colour pickers to text boxes.

Colour Picker

Displays a colour picker for selecting a custom HEX code.

{
   "id": "primary-colour",
   "name": "Primary Colour",
   "default": "#0000FF",
   "description": "Select your primary colour.",
   "type": "colour-picker"
}

File Uploader

Display a file upload option, useful for favicons, or other assets.

{
   "id": "my-file",
   "name": "My File",
   "default": "",
   "description": "Upload a file.",
   "type": "file"
}

Image Uploader

Display an image uploader config option.

{
   "id": "custom-image",
   "name": "Custom Image",
   "default": "",
   "description": "Upload an image here.",
   "type": "image-uploader"
}

Select

Display a select dropdown to allow the store to select from multiple options.

{
   "id": "nav-style",
   "name": "Navigation Style",
   "description": "Set the location for your navigation.",
   "type": "select",
   "default": "Vertical Nav in Sidebar",
   "values": [
       "Horizontal Nav in Header",
       "Vertical Nav in Sidebar"
    ]
}        

Slider

Display a slider to allow the store to select between a range of numbers - useful for customising.

{
   "id": "width",
   "name": "Button Width",
   "default": "",
   "description": "Select the width of buttons.",
   "type": "slider",
   "min": 0,
   "max": 100
}

Textarea

{
   "id": "header-box",
   "name": "Header Content",
   "default": "",
   "description": "Enter the text you'd like to appear in the header.",
   "type": "textarea"
}

Url

{
   "id": "discord-link",
   "name": "Discord Invite Link",
   "default": "",
   "description": "Enter the URL of your discord invite link.",
   "type": "url"
}

Accessing Config Options

To dynamically access the config option from within your template you can use the config() Twig function. This will output the entered option value, allowing you to use it however you wish within your template, such as outputting a text area into a specific location or altering CSS via a colour picker.