Whilst what Mailbeez does on the surface is pretty simple (What’s this, a personalized automated email in my inbox based on my purchase history? – thanks!), like most things in life, behind the scenes there is a lot going on. In order to become more comfortable with the Mailbeez eco-system, this tutorial we will guide you through the MailBeez template system, providing you with the knowledge to be able to adjust any aspect of the generated emails to your needs.

This tutorial will also cover how to create your own templates, and keep them separate from the included templates – pretty important if you want to avoid overwriting your changes when updating the modules!

How does MailBeez put templates together?

Emails generated by premium MailBeez modules are 100% template based, and by simply adopting the templates you can control every piece of their output.

The template hierarchy of the premium modules looks like this:

*if used by the Module

Premium modules are supplied with a set of professionally designed templates in different styles ( currently “default”, “fashion”, “friendly” and “simple columns”), with each style consisting of a set of template files for the main body, product lists, social services and coupon areas.

Template Selector

The subtemplate (.tpl) files follow the name of the style. For example, the template “friendly” for the module “winback_advanced” consists of:

mailhive/mailbeez/winback_advanced/email/

friendly_body_html_step1.tpl
friendly_body_html_step2.tpl
friendly_body_html_step3.tpl
friendly_body_html_step4.tpl

Product list:

mailhive/configbeez/config_list_engine/templates/list_friendly.tpl

Social Sharing services:

mailhive/configbeez/config_social/templates/social_friendly.tpl

Coupon:

mailhive/configbeez/config_coupon_engine/templates/coupon_friendly.tpl

The sub-templates are not assigned automatically as they need to be specified in the parent-template (one step up in the hierarchy). This flexibility allows you to mix body templates, an example of which might be to mix the “friendly” template with a product list taken from the “fashion” email style.

Whenever a template is selected, the same presentation of product lists, social sharing services and coupons is used across all Mailbeez modules that share that same style name.

Making your own set of templates:

For easier upgrading (and so your custom files won’t be overwritten) we do recommend that you create your own set of template files, which is easily done by quickly renaming the body template like this:

mailhive/mailbeez/winback_advanced/email/

myfriendly_body_html_step1.tpl
myfriendly_body_html_step2.tpl
myfriendly_body_html_step3.tpl
myfriendly_body_html_step4.tpl

This new template will automatically appear in the “winback_advanced” module as a new style “myfriendly“.

New custom template appears in selector

If you would like to adjust the sub-templates for product lists, social sharing and coupon codes then just repeat the steps above, but just remember that you will also have to change the template tags used in your newly created template above to take the new sub-templates. Please read below how to do this.

Where can I edit the common header and footer for all emails?

With the Mailbeez Template Manager installed, go to:

MailBeez > configuration > template manager

and find “Common Main Template” > Edit Button

Without the Template Manager:

Edit the following template file using your preferred editor:

mailhive/common/templates/email_html.tpl

How can I change the email header image?

The header image is defined in the line:

<img src=”{$catalog_server}mailhive/common/images/default_emailheader.gif” border=”0″ hspace=”0″ vspace=”0″ width=”600″>

To change the stock image, please create a 600px width image, name it – for example “mynewheader.png”, and then transfer it by FTP to your site’s image area, or better yet, the Mailbeez area within your FTP in order to keep things tidy, which can be found at: “mailhive/common/images/”

Your new header image path would then be:

<img src=”{$catalog_server}mailhive/common/images/mynewheader.png” border=”0″ hspace=”0″ vspace=”0″ width=”600″>

Where can I edit the layout of the product grid?

Product grids are generated by the Mailbeez List Engine supplied with all Mailbeez Premium modules. The layout of the product grids is defined in the sub-templates which is easily edited and located here:

mailhive/configbeez/config_list_engine/templates/*.tpl

You can also define different list layouts, which must be defined in the files located in

configbeez/config_list_engine/templates/

and named like “list_<name.tpl” e.g.

list_default.tpl
list_mytemplate.tpl
list_somename.tpl

To include the list use:

{$list_engine.productlist} same as {$list_engine.productlist_default}
{$list_engine.productlist_mytemplate} takes list_mytemplate.tpl
{$list_engine.productlist_somename} takes list_somename.tpl

For multilingual emails you can define language variants of the templates by adding “lang” to the filenames like this:

list_default_lang_1.tpl default layout for language id 1
(…)
list_somename_lang_5.tpl layout list_somename for language id 5
(…)

Include them in the template by using this:

{$list_engine.productlist_somename_lang}

In any module’s language-specific template, you don’t need to specify the language id – the module knows that by itself.

Where can I edit the Layout of the social sharing block?

The social sharing blocks are generated by the Mailbeez Social Sharing Engine supplied with all Mailbeez Premium modules. The layout of the social sharing elements is defined in the sub-templates located below, which can easily be edited to your needs:

mailhive/configbeez/config_social/templates/*.tpl

The Mailbeez Social Sharing services are included in the list template using a tag like:

{$products[product].social}

You can also define different layouts, which must be defined in files located in

configbeez/config_social/templates/

and named like “social_<name>.tpl” e.g.

social_default.tpl
social_mytemplate.tpl
social_somename.tpl

To include the social section use:

{$products[product].social} same as {$products[product].social_default}
{$products[product].social_mytemplate} takes social_mytemplate.tpl
{$products[product].social_somename} takes social_somename.tpl

For multilingual emails you can define language variants of the templates by adding “lang” to the filenames like this:

social_tiny_lang_1.tpl layout tiny for language id 1
(…)
social_somename_lang_5.tpl layout social_somename for language id 5
(…)

Include them in the template by using this (must be inside the section generating the list of products:

{$products[product].social_lang} same as {$products[product].social_default_lang}
{$products[product].social_tiny_lang} takes social_tiny_lang_<x>.tpl for the customers language x
{$products[product].social_somename_lang} takes social_somename_lang.tpl for the customers language

So in the module’s language specific template you don’t need to specify the language id – the module knows that by itself.

Where can I edit the layout of a coupon?

The coupons are generated by the Mailbeez Coupon Engine supplied with all Mailbeez Premium Coupon modules. The layout of the coupon elements is defined in the sub templates located below, which can be easily modified to meet your needs:

mailhive/configbeez/config_coupon_engine/templates/*.tpl

How can I truncate e.g. a long product name?

Variable modifiers allow you to adjust the length of a product name output. The following would cut the product name after 40 characters and add ‘…’

{$products[product].name|truncate:40:”…”}

If you are interested in this you can read more over at:

http://www.smarty.net/docsv2/en/language.modifier.truncate.tpl

How can I change the format of a date?

Again, variable modifiers allow you to adjust the output format of a date to your needs:

{$coupon_expire_date|date_format:”%A, %B %e, %Y”}

{$order_date|date_format:”%A, %B %e, %Y”}

will generate an output like:

Monday, December 1, 2021

For more date related modifications head over to:

http://www.smarty.net/docsv2/en/language.modifier.date.format.tpl

How can I e.g. capitalize the customer name?

If you like to make sure the customers name are formatted in a nice way even when the customer entered their name in e.g. lowercase you can apply this modifier:

{$firstname|capitalize:true}

More information about modifiers:

http://www.smarty.net/docsv2/en/language.modifiers.tpl#language.modifier.capitalize