Watch our video about Skins
Skins Management has been redesigned for improved usability. The new editor replaces the previous setup under Account Settings and now includes dropdown filters, live preview, and a WYSIWYG (what you see is what you get) interface for direct skin customisation.
Introducing our new Skin editor - making it easier to manage and update default design content and styling for all boilerplates. This simplifies maintenance and ensures consistent design across projects. Skins are primarily used for basic styling, as well as header and footer information, but they can also be customised to include other elements within your boilerplate. Skins also make it easy to update elements, such as your logo, across all send-outs at once. Any changes made in the editor are automatically reflected in all draft emails created from the boilerplate, as well as in any emails currently active within journeys.
Understanding the Layers
When you create an email draft, what you see in the editor is determined by a combination of your boilerplate and your skin settings saved either at the project or account level.
You can think of this setup as a layer cake:
- The boilerplate forms the base layer - it defines the overall framework and contains all the block structures.
- The next layer covers design and text content. This layer first pulls information from the account-level skin settings, and then applies any project-level overrides you’ve saved.
This structure ensures flexibility: you maintain consistent design and branding across your account, while still allowing individual projects to have tailored adjustments when needed.
Skins overview
All your projects are listed under Content > Templates > Skins.
The Skin column indicates which projects have a custom skin applied. Projects without a custom skin will automatically use the account-level settings.
To open and edit a skin, simply select the project name.
Editor
When you open a skin, the editor is divided into three main areas:
- Preview settings
- Preview
- Side editing panel
Preview Settings
At the top of the editor, you can choose what to preview. The selected channel determines which preview campaigns are available. Remember that each campaign is created from a specific boilerplate, so the content and layout may vary depending on that setup. You can also switch between different skins to see how a campaign will look with alternative styling. This helps you ensure that your design and branding are consistent across all channels.
Editing
All edits are made in the right-side panel, and updates are displayed in real time. The panel includes the following tabs:
-
Style
The looks -
Content
Default texts -
Scripts
Advanced edits -
Settings
Clear edits and download backup
(Style and Content will likely be the most frequently used tabs, while Script offers additional, advanced, customisation options)
Style
In the Style tab, you can adjust colours, logos, text styling and header and footer layouts.
You can set background colors for the body and content sections.
To edit the body, header-, footer- or content-section, select a predefined section by clicking the image that shows the area.
To change either the header or footer quickly, select one of the predefined header and footer blocks, first by clicking the image that displays the current layout, either for your email or your page, and then select another predefined layout
You can easily edit text styles. By clicking a heading or text style, you can choose the font family, font size, link color and more.
Please note that font families need to be entered manually, as a dropdown selection isn’t available yet - double-check spelling to ensure accuracy.
Buttons and icons can also be customised in the right-side panel.
Content
In the Content tab, you can edit the default texts throughout your template, including headers, footers, email/SMS unsubscribe messages and other sections.
Below is an example of the Contact section:
Note that the texts displayed under Content might not be shown in your header or footer by default. This is determined by the layout of your header/footer. Not all layouts use all Content texts.
Scripts
In the Scripts tab, you can add elements to the <head> section of your email, dynamic web pages, print etc.
It is recommended that you have a bit understanding of HTML/CSS before adjusting the Script
For emails, you can include <link> elements, for example, when adding a custom font or additional CSS. The content of the <head> element will be put first.
To add custom styles, type your classes directly into the CSS input field. Leave out the <style type="text/css"> tag.
Pages always include Font Awesome 4, jQuery 1.12+, and Bootstrap 3 by default. The content of this config parameter will be put last in the <head> element.
You can add any valid elements (<meta>, <script>, <link>, <style>), but make sure that any libraries you include are compatible with the ones already in use.
Settings
In the Settings tab, you can reset your design to start fresh and save a backup of your work.
Clearing skin lets you either delete all styling and settings on your current skin, so you start with a blank sheet, or revert back to the Symplify Default settings.
The Backup let you copy/download the JSon script of the currently selected project/skin