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 into Management Interface using your username and password. This opens the dashboard of your Management Interface.
Step 2: Open Templates
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.
Tasks
Edit template file
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.
Changes are visible in WebShop once you have saved your changes.
Reset template to default
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.
Changes are visible in WebShop once you have confirmed you wish to return to the default version.
Manage 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.
Changes are visible in WebShop once you have clicked Restore and confirmed your choice.
Check documentation
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.
