How to customize Account Dashboard
Purpose and scope
The Templates Editor feature is a code-based design tool to extend the look and feel of your Account Dashboard.
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.
The purpose of this article is to provide a step by step guide on how to use the Templates Editor to modify your Account Dashboard.
Key points
If you are comfortable with HTML, CSS and variables, you’ll be in a good place to use this feature to achieve a personalized look and feel for your WebShop.
You are responsible for ensuring that the code you have written doesn’t adversely affect your WebShop.
Introducing terms and concepts used in this article
Term | Definition |
|---|---|
Cascading Style Sheets | (CSS), describes how HTML elements are displayed on screen and can control the layout of multiple webpages at once. |
Hypertext Markup Language | (HTML), the standard markup language for creating Web pages, used to describe the structure of a Web page. |
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.
