Using Templates Editor
Purpose and scope
The Templates Editor is a code-based design tool to extend the look and feel of your WebShop.
The Templates Editor gives you more control over the look and feel of your WebShop. We have exposed objects and variables in different parts of WebShop, including the Account Dashboard and Gated Login (if enabled). This allows you to achieve a personalized look and feel for your WebShop. Alternatively, add icons and/or re-order menu items on your Account Dashboard. Or use the TWIG block, found under Misc in Visual Page Builder, which allows you to use the Templates Editor on content pages.
This article explains the Templates Editor and how it works, and provides links to other helpful content to help you get started!
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.
Benefits
Key benefits are:
Use simple code statements with logic and variables to tailor messaging to your customers.
Capable of customizing different elements of WebShop to suit your business needs.
Highlight and link promotions and offers for your customers directly from their Account Dashboard.
Any changes you make can be done at a time that suits you.
Any changes that you make are applied immediately, so it is quick and easy to update WebShop as you go along.
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. |
Fitting it all together
The Templates Editor is integrated with the Management Interface. It is a code-based design tool that can extend the look and feel of your WebShop. The Templates Editor uses Twig, a low-code, easy-to-use templating language. Twig consists of a standard syntax that uses expressions, variables, and tags to control the content and logic of each template. Read Introduction to Twig (external site) for more information about how to use Twig.
When you open the Templates Editor, the interface is displayed as two panels: a navigational tree and a code editor. The Twig templates you can modify or add to are listed under the navigational tree. Clicking on the file name opens the code in the editor to the right of the screen. Each template modifies a different section of a WebShop page. Our image maps show you which template modifies which WebShop page section
Look at these image maps to discover where in WebShop each template listed in the navigational tree modifies. Areas are highlighted with a tooltip that says “Modify with <template-name>.twig“.
Areas are highlighted with a tooltip that says “Modify with <template-name>.twig“.Each template file identifies which part of your WebShop will be updated with your code changes. For example, if you add code to the “dashboard-pre.twig” template, changes are displayed at the top of the main account dashboard page for both B2C and B2B customers. You can change the template’s logic using tags or personalize it using exposed objects and variables. An object groups a set of attributes (variables) associated with that object.
The following objects are available to include in your code:
Object name | Description |
|---|---|
account | Your customer's account contains information about how they interact with WebShop. |
cms | Each CMS object refers to a page that is visible in your WebShop. Attributes include information about the page, such as its ID, its full URL, its title, and other custom-defined fields. |
customer | A customer is your client who uses your WebShop to purchase products and manage their account with you. Attributes include customer code, name, contact details, address, financial information, and other custom-defined fields. |
product | A product is an item for sale in your product catalog. Attributes include its name, description, product code/SKU, status, type, images, and metadata related to the product, when it was last updated, other settings that determine how and where your products are listed, and other custom-defined fields. |
The variables associated with each object are listed under the Documentation tab.
Object and variable names are case sensitive.
More information
Key points
We have included Reset and Versioning functionality to allow you to restore your WebShop to its default or previous version.
Using the Templates code editor
Select Templates under Content in the Management Interface. This opens the Templates Editor from where you can modify Twig templates to extend the look and feel of your Account Dashboard.
Select the code snippet (template) you wish to update. Use Twig, our templating language, to add logic and content to the selected template. Once you select Save, your updates are immediately visible in WebShop.
Alternatively, select Reset to reset any code snippet to its default version or select Versioning to either restore a previous version or compare versions of code snippets.
Please read our detailed step-by-step guide to using the Templates Editor.