How to customize Flex Mail

In this guide you will learn how to customize the latest version of our responsive Flex Mail Email Template. You can also hire Zomex to complete the customization and installation for you for just $29:

Order Email Installation

Before You Start

The latest design is stored inside files/v3/. Keep an untouched copy of the original ZIP before editing either template file.

Flex Mail uses email-compatible HTML, table-based layouts, embedded CSS and inline styles. The structure is intentionally different from a normal website because email applications provide less consistent HTML and CSS support.

Use a plain text or code editor such as Visual Studio Code. Word processors can change quotation marks and formatting, which may break the template.

Choosing The Correct File

The files/v3/ directory contains two template files:

The WHMCS version uses variables that are replaced automatically when an email is sent:

{$company_name}
{$company_domain}
{$company_logo_url}
{$whmcs_url}
{$email_marketing_optout_url}

Do not replace these variables with fixed details when using WHMCS. The company name, domain, logo, WHMCS URL and marketing opt-out URL are loaded from your WHMCS configuration.

The main content area of whmcs.html is intentionally blank between the HEADER and FOOTER comments because WHMCS inserts the individual email template content there. The html.html file contains a complete example email and the full reusable content library.

If Flex Mail is already installed in WHMCS, make your changes to the corresponding global email CSS, header and footer fields rather than uploading the source file again.

Company Branding And Images

WHMCS logo

The WHMCS version uses {$company_logo_url} for the logo in both the header and company footer. Update your company logo through WHMCS rather than replacing this variable in the template.

The header displays the logo at up to 225 pixels wide and the footer displays it at up to 190 pixels wide. A clear PNG image with a transparent or white background normally provides the best result.

Standalone HTML logo and promotional images

The files/v3/images/ directory contains the default logo and two promotional images. Upload these images to your own website so that they are loaded from your domain rather than the Zomex demonstration domain.

Search both the HTML and WHMCS source files for:

https://www.zomexdemo.com/images/flexmail/

Replace it with the directory where you uploaded the images, for example:

https://www.yourdomain.com/images/flexmail/

The WHMCS logo is loaded dynamically, but the Web Hosting and Web Design promotional cards still use image URLs that should be updated. Always use a complete HTTPS URL because relative image paths are not reliable inside email applications.

Preheader, Header And Navigation

Hidden inbox preheader

The hidden preheader appears beside or below the subject line in many inboxes. Search near the start of the email header for:

<div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">
	Important account information from {$company_name}.
</div>

Replace the wording with a short summary that makes sense for most emails sent by your business. Keep {$company_name} when using WHMCS.

Preview line and header links

The narrow line above the email card contains the service description and the View Email Online link. You can change the wording and destination, or remove the complete preview-line table if it is not required.

The logo header contains two quick links. In the WHMCS file they are:

<a href="{$whmcs_url}clientarea.php" target="_blank">Client Area</a>
<a href="{$whmcs_url}contact.php" target="_blank">Contact</a>

Update the visible labels or destinations to suit your business. When using the standalone HTML version, replace each href="#" value with a complete URL.

Compact navigation

The compact navigation appears below the logo header on desktop screens and is hidden on smaller mobile screens. Each table cell contains one link:

<td style="padding:14px 13px;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:18px;font-weight:bold;">
	<a href="{$whmcs_url}web-hosting.php" target="_blank" class="link" style="color:#585858;text-decoration:none;">Web Hosting</a>
</td>

Change the URL and visible text for each item. You can remove an item by deleting its complete <td>...</td> block or duplicate a block to add another link. Keep the menu concise so it remains on one line in common desktop email widths.

Reusable Content Elements

The html.html file contains a library of ready-made content elements. Each element is clearly wrapped with comments:

<!-- CONTENT ELEMENT: INFORMATION NOTICE -->

	... reusable content element ...

<!-- END CONTENT ELEMENT -->

Copy the complete block you need into an individual email template, then replace the example wording, links and values. Keep the surrounding table structure and inline styles intact.

The included content elements are:

For WHMCS, add reusable content elements to the body of the appropriate individual email template. The global Flex Mail header and footer will continue wrapping the content automatically.

Use normal WHMCS email merge fields inside these elements where required. Send a test email after adding more complex tables or two-column content.

Service Cards And Support Area

More From Your Company cards

The footer begins with two promotional cards for Web Hosting and Web Design. Each card contains an image link, heading, description and Learn More link.

Update both links in each card so the image and Learn More text point to the same page. Also replace the image URL and alternative text:

<a href="{$whmcs_url}web-hosting.php" target="_blank">
	<img class="fluid" src="https://www.yourdomain.com/images/flexmail/webhosting.png" width="280" alt="Web Hosting" style="display:block;width:100%;max-width:280px;height:auto;">
</a>

You can rename the cards for any two products or services. For the most reliable responsive layout, keep both images at the same dimensions and approximately 280 pixels wide.

To remove the promotional area completely, delete the content beginning with the More from heading and ending immediately before the Support CTA comment.

Support call to action

The support area contains a heading, supporting sentence and Contact Support button. Update the wording and URL, or remove the complete table row beginning below the Support CTA comment.

The default WHMCS button links to {$whmcs_url}contact.php. You can change it to your support ticket page, knowledgebase or another customer service page.

Footer Links, Social Links And Address

Footer navigation

The footer navigation includes Contact, Client Area, Knowledgebase and Announcements. Update the labels and URLs or remove links that are not useful to your customers.

When removing a link, also remove one adjacent separator so the footer does not contain a repeated or trailing vertical line.

Text-based social links

Version 3 uses reliable text-based social links rather than image icons. Change each URL to your own profile and remove any complete link that you do not use:

<a href="https://www.facebook.com/your-page/" target="_blank" class="link" style="display:inline-block;padding:5px 9px;color:#ffffff;text-decoration:none;font-weight:bold;">Facebook</a>

You may also rename a platform or duplicate a link for another network. Keep the list reasonably short so it wraps cleanly on mobile devices.

Company address

The company name and logo are loaded automatically in WHMCS, but the postal address must be edited manually:

{if $company_domain}<strong style="display:block;margin-bottom:3px;font-size:14px;line-height:20px;color:#334155;">{$company_name}</strong>{/if}
2 Street Name<br>
Town, County<br>
Country, ME7 5BD

Replace the example address with your registered or business contact address. Check the legal requirements that apply to the type of email and the countries where your company operates.

Email preferences and unsubscribe text

The final legal area explains why the recipient received the email and links to their email preferences and marketing opt-out URL. Update the wording if needed, but retain {$email_marketing_optout_url} where marketing emails need an unsubscribe link.

Transactional emails and marketing emails may have different requirements. Review your WHMCS email configuration and applicable regulations before removing preference or unsubscribe links.

Changing Colours And Typography

Flex Mail uses both embedded CSS and inline styles for email-client compatibility. Changing a colour only in the CSS section may not update every part of the design, so use your editor's find and replace feature to update matching inline values as well.

The main default colours are:

Page background:       #eef2f7
Section background:    #f8fafc
Email background:      #ffffff
Main text:             #585858
Headings/dark buttons: #000000
Primary accent:        #ff9700
Text links:            #d96f00
Borders:               #dbe3ee, #e8edf4, #e2e8f0
Dark promotional blue: #143778

The reusable information, success, warning and action-required elements use their own colours. Update these independently if you want to retain clear visual differences between message types.

The default font stack is:

font-family: Arial, Helvetica, sans-serif;

Web fonts are intentionally avoided because many email applications block or inconsistently support them. Changing to another common system font is possible, but test the result across several email clients.

When using find and replace, replace complete colour values rather than partial text and keep a backup of the original file in case the same colour is used in more places than expected.

Testing Your Changes

After customizing the template:

Email applications do not all render HTML in exactly the same way. Minor differences are normal, but the content, links and main layout should remain clear and usable.