CMS-General

Build a custom coded template

Last updated: July 30, 2019

Applies to:

Marketing Hub  Professional, Enterprise
Legacy Marketing Hub Basic
HubSpot CMS

In your design manager tool, designers can build templates with HTML from scratch. For Marketing Hub Professional and Enterprise accounts, this includes custom coded email templates. It's also possible to clone a HubSpot template layout to HTML, and customize it as a coded template.

This article includes how to create and troubleshoot custom coded templates, as well as what HubL is required in your templates. If you aren't comfortable working with code, use one of the ready-made templates in your HubSpot account or check out the template marketplace to purchase pre-made templates.

Please note: a custom coded template won't be responsive by default. Work with a professional designer to make sure your template is responsive for different screen sizes.

Create a new HTML & HUBL file

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • Create a new file by clicking File > New file. You may need to click the folder icon folder to expand the finder.
  • In the dialog box, click HTML & HUBL.
Code editor
  • Enter the details of your new file:
    • Select Template or Template Partial
    • Select the type of template you're coding (page, blog, or email).
    • Give your file a name.
  • Click Create.
  • Write the HTML for your page or email template.
  • To preview how your HubL will render, click to toggle the Show output switch on. A panel will open on the right with the rendered preview.

    design-manager-show-output-toggle
  • Any errors in your code will be flagged in an error message when you try to publish changes. The error console at the bottom of the code editor will display the error or warning details, as well as suggestions on how you can fix these errors and warnings.

error-console

For additional resources on custom design, you can refer to HubSpot designer documentation. There is additional documentation on coded module options such as filter tags and icons.

When you're done, click Publish changes to publish the template or HTML file.

Add the required HubL tags

Once you have your structural HTML written, you'll see an error message if your code is missing any required HubL tags if you were to try to publish your the file. HubL tags connect your code to HubSpot's settings and content editor. Learn about the required template variables and HubL module tags.

For email templates, include the required email and CAN-SPAM tokens. Check out the HubL documentation to learn more about CAN-SPAM tokens.

The required CAN-SPAM tokens can be included in two ways:

1. Include one token that pulls in the unsubscribe CAN-SPAM section: {{unsubscribe_section}}. When this token is used, you won't have the ability to format the language and style of the text and links. Here is an example of what the {{unsubscribe_section}} would look like:

You then need to add the following tokens individually:

{{site_settings.company_street_address_1}}
{{site_settings.company_city}}
{{site_settings.company_state}}
{{site_settings.company_zip}}

2. Include the required individual unsubscribe link and address tokens:
{{site_settings.company_name}}
{{unsubscribe_link}} or {{unsubscribe_link_all}} (include at least one)
{{unsubscribe_anchor}}
{{site_settings.company_name}}
{{site_settings.company_street_address_1}}
{{site_settings.company_city}}
{{site_settings.company_state}}
{{site_settings.company_zip}}

Using the tokens individually will allow you the flexibility to add wording around the tokens and links and to format them in the desired style and language.

Clone to HTML

An alternative to coding from scratch is cloning one of HubSpot's templates to HTML. Cloning a template to HTML gives you access to a template's HTML/HubL and is a great way to reverse engineer a HubSpot template that you have constructed.

To create a coded version of an existing template:

  • {{ local.navDesignManager }}
  • Click Actions > Clone to HTML in the finder. The HTML file will open in a new tab of your design manager. Its file name will match the name of the original template with copy appended to it.
HubSpot Help article screenshot