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 with display: 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 with display: 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.