Create a custom template
If our predesigned store templates do not fit your needs, you can design completely custom templates with HTML, CSS and our templating language.
Templating language
AdSigner uses a simple templating language to insert content into a template. This is done with curly brackets and a field tag. Before using a field tag in a template, you need to add the field to the template using the
button on the bottom of the field sidebar.
Simple data fields are interpolated as a string into the template.
<span>{ name }</span>
<span>Lenart</span>
Link fields render a full anchor node that creates a link. If you wish to apply styles, classes or other attributes to the node, you can use the additional href
and text
properties to render the values separately.
{ website }
<a title="This is a link."
href="{ website.href }">
{ website.text }
</a>
<a href="https://www.adsigner.com"
target="_blank">www.adsigner.com</a>
<a title="This is a link."
href="https://www.adsigner.com">
www.adsigner.com
</a>
Image fields render an img
node with alt text that defaults to field label. If width and height are set in the field options, they are added to the node as attributes. Properties available on the image field are src
, alt
, width
and height
.
{ avatar }
<img src="{ avatar.src }"
width="100">
<span>This is { avatar.alt }, { avatar.width } pixels wide.</span>
<img src="https://www.adsigner.com/s/example.png"
alt="Avatar"
width="70"
height="70">
<img src="https://www.adsigner.com/s/example.png"
width="100">
<span>This is Avatar, 70 pixels wide.</span>
Banner fields are image and link fields combined. They inherit properties from both types of fields and render an img
node inside an a
node.
{ banner }
<a href="https://www.adsigner.com"
target="_blank">
<img src="https://www.adsigner.com/s/example.png"
alt="Banner"
width="470"
height="150">
</a>
Conditional expressions
To conditionally render nodes based on an expression, you can use adx-if
attribute on any node.
<!--
In this example,
title is not included in signature data.
-->
<span adx-if="{ name }">Name: { name }</span>
<span adx-if="{ title }">Title: { title }</span>
<span adx-if="{ mobile.text }">I have a mobile phone!</span>
<span adx-if="{ name } and { title }">I have a name and a title.</span>
<span adx-if="({ mobile.text } or { title }) and { name }">Complex expression.</span>
<span>Name: Lenart</span>
<span>I have a mobile phone!</span>
<span>Complex expression.</span>
Styling
You can use CSS or inline styles to style your template. Before rendering, all styles will be inlined in HTML. You are free to use data interpolation in your stylesheets as well.
Link tags can not be used as a stylesheet source and will be removed before rendering. Media queries will not be preserved. border
, cellpadding
and cellspacing
will be applied as attributes to table
elements. HTML selectors (class
and id
attributes) will be removed from the markup.
<style>
.my-table {
font-size: 12px;
color: { primary-color };
}
</style>
<table class="my-table"
style="font-weight: bold;">
<tbody>
<td>Some text</td>
</tbody>
</table>
<table style="font-size: 12px; color: #000000; font-weight: bold;">
<tbody>
<td>Some text</td>
</tbody>
</table>
Rendering pipeline
The entire rendering process consists of a few steps, some of which only happens during production rendering and not during live template preview.
- Capturing interpolated values happens as the first step in the rendering pipeline. All tags enclosed in curly brackets are tested against fields tags included in the template. If there is no matching field for a tag, no interpolation will be made and curly brackets will be preserved in the rendered code.
- Evaluating expressions inside the
adx-if
attributes. In production rendering, nodes with conditional attributes that evaluate to false are removed from the markup. In the live preview, they are hidden withdisplay: none
, but remain in the DOM. - Evaluating expressions inside the
adx-if
attributes. In production rendering, nodes with conditional attributes that evaluate to false are removed from the markup. In the live preview, they are hidden withdisplay: none
, but remain in the DOM. - Stylesheet inlining only happens in production renders and inlines stylesheets as described above.
- Minification only happens in production renders and removes comments and collapses whitespace to minimize the character length of the signature.
Client compatibility remarks
Emails aren’t websites! Because some major email clients are running on antiquated rendering engines, there is no guarantee your live preview will match the look in your email client. Generally, you should avoid using any semantic of div
elements and rely completely on nesting tables instead.
We recommend taking a look at the practices used in our store templates. Make sure to test your templates before use.