Skip to main content
Skip table of contents

How do I use the Templates editor?

Purpose and scope

The Templates Editor feature is a code-based design tool to extend the look and feel of your Account Dashboard.

The Templates Editor gives you more control over the look and feel of your WebShop. Initially, we have exposed objects and variables in the Account Dashboard, allowing you to add messages, links to customer promotions and/or move the order of elements contained in the body of the Account Dashboard screen. Use our Using account dashboard icons feature to re-order menu items on the Account Dashboard. We have also introduced a TWIG block to our Visual Page Builder, which allows you to use the Template Editor on content pages also.

This feature is a work in progress. It is enabled upon request. It will be extended to expose more objects and variables over time giving you even more control over the look and feel of your WebShop.

The purpose of this article is to explain what the Templates Editor feature is, and to provide some use cases where you may find it useful.

Key points

  • Knowledge of coding is required to use this feature. You must understand some basic programming constructs and be comfortable using HTML, CSS and variables.

  • You are responsible for ensuring that the code you have written doesn’t adversely affect your WebShop. We do not provide free support fix code you have written in the Templates Editor.

  • This feature is a work in progress.

  • Currently, it is enabled upon request.

Introducing terms and concepts used in this article

Term

Definition

Twig

an open source template engine which we refer to as our templating language. It consists of a standard syntax that uses expressions, variables and tags to control the content and logic of each template or code snippet.

Step by step

Step 1: Log into Management Interface

Log in

Log into Management Interface using your username and password. This opens the dashboard of your Management Interface.

LogIntoManagementInterface.jpg

Step 2: Open Templates

Open
  • Click Templates, located in the left hand menu under Content. This opens the Template Editor. The Template Editor contains two panels:

    • a tree containing code snippets that you can select to edit

    • an editor where you add your code.

Templates-Editor.png

Tasks

Edit template file

Edit
  • Click on the template file in the Templates Editor that you wish to edit. The contents of the file appear on the right panel under the Editor tab.

  • Update the code using Twig syntax as required. See Using Template editor use cases for some examples of what you can do to modify your Account Dashboard.

  • Click Save. This saves the code and updates the Account Dashboard with your changes.

Templates-Editor.png

Changes are visible in WebShop once you have saved your changes.

Reset template to default

Reset

When you have a code snippet open, you have reset it to WebShop’s default.

  • Click Reset on the top right of the screen. This resets the opened code snippet to the default version.

Templates-Editor-Reset.png

Changes are visible in WebShop once you have confirmed you wish to return to the default version.

Manage Versioning

Versioning

When you have a code snippet open, you can view different versions of that code snippet.

  • Click Versioning on the top right of the screen. This opens a list of saved versions for the open code snippet.

  • Click the ‘restore’ icon to restore a specific version.

  • Click the ‘compare’ icon to compare the selected version with the previous version.

Templates-Editor-Versioning.png

Changes are visible in WebShop once you have clicked Restore and confirmed your choice.

Check documentation

Check

The Documentation tab displays the objects and variables that can be modified in the opened code snippet.

  • Click Documentation to view the objects and variables for the opened code snippet.

Templates-Doc.png

What will my customers see in WebShop?

Customer view

The code changes you have made are immediately visible in WebShop. See Using Template editor use cases for some examples of what your customers would see depending on the changes you’ve implemented.

Related content

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.