CMS-General

Build a custom coded template in HubSpot

Last updated: August 3, 2018

Applies to:

Marketing Hub: Basic, Pro, Enterprise

While your template builder gives your content creators greater flexibility in terms of structuring content and saves designers from having to write HTML, your design manager tool also allows designers to build templates with HTML from scratch.  

This article walks through where to code custom templates in HubSpot and what variables to include in custom email templates. If you aren't a designer who's comfortable coding templates from scratch, use one of the ready-made templates in your HubSpot account or check out the template marketplace under Content > Marketplace to purchase pre-made templates.

Please note: coding HTML sites or emails from scratch does not automatically ensure that your template will be responsive

Create a new HTML & HUBL file

{{ local.navDesignManager }}

Create a new file by clicking Actions > New file in the left sidebar menu (you may need to click the folder icon folder to expand the menu) or click Create a new file in the upper right-hand corner (this button appears if you don't have any tabs open in your design manager). 

In the dialog box, click HTML & HUBL.

Code editor

 

Enter the details of your new file:

  • What are you building?: Choose Template or Template Partial
  • Template type: Select the type of template you're coding (page, blog, or email).
  • File name: Give your file a name. 

Click Create.

Next, write the HTML for your page or email template. The HubSpot code editor auto-indents, highlights your HTML syntax, and closes your tags for you. 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 indicating that your code is missing 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, click Actions > Clone to HTML in the upper left-hand corner of your template in the layout editor. The HTML file will open in a new tab of your design manager. Its name will match the name of the original template with copy appended to it.

HubSpot Help article screenshot

Was this article helpful?

If you still need help you can get answers from the , or to contact support.