Building and editing templates (advanced)

Most people only ever fill in templates (see Fill in a template). This page is for the advanced user who wants to build a new template or change an existing design. It involves a little HTML/CSS/JS, so it's aimed at someone comfortable with basic web markup — but the impressBox-specific parts are explained here.



A template has two parts that work together: the code (the HTML/CSS/JS that defines the layout) and the context schema (the parameters the code fills in). You write the code with placeholders and describe each placeholder in the schema, so everyday users get a friendly form. For the concepts — what a schema is versus the filled-in context values — see Template context & schema (for editors).

Creating a template from scratch

To create a new template you provide:



  1. A name.

  2. The code (HTML/CSS/JS). Reference your parameters as placeholders inside the markup so the values drop into the design.

  3. The schema — the parameters the template accepts, each with a type (text, number, list, media, etc.) and a friendly label.

  4. The render type — image by default, or video if the design is animated. Only choose video when you genuinely need motion, because video rendering is heavier than a still image.



When the template is created, impressBox automatically adds a sample content item so you can immediately see it filled in with example values.



In the editor, the code area (HTML/CSS/JS) sits alongside the schema / parameters area, so you can see how each placeholder maps to a field as you build.

Editing the design of an existing template

To change the layout, styling, or behaviour of a template, edit its code. Open the template, review the current code and schema, make your changes, and save. Because the code and schema must stay in step, if you add a new placeholder in the code, add a matching parameter in the schema (and vice-versa) — otherwise users won't be able to fill it, or a parameter will have nothing to fill.



Always preview after editing. Open the sample content and preview it to confirm the design still renders correctly before anyone publishes it.

Renaming a parameter — label vs. key

There are two different things you can "rename," and they are not the same:



  • The display label (the friendly title users see) — renaming this is safe. It changes only the human-readable label in the form, not the underlying field, so existing content keeps working. Use it to turn a raw name like sourceA into something clear like "Header image".

  • The underlying parameter key (the actual name in the schema, e.g. price) — changing this affects every content item that uses the template, because items reference parameters by key. Avoid renaming keys unless you really must, and update the code to match.



Duplicating a template

Before you make major changes, duplicate the template. Duplicating creates a full copy — same code, same schema, same categories — with its own sample content. Edit the copy and leave the original untouched, so you always have a working version to fall back on.

You can only edit templates you own

Shared / built-in templates (the ones available to everyone, such as 2 Columns) are read-only — you cannot change their code or rename their parameters. If you need a customised version of a shared template, duplicate it first and edit your copy.

Where to go next