Skip to main content

Supported products

Requires one of the following products or higher.
Sales HubSales Hub -Professional
This documentation covers legacy quote templates only. Legacy quotes support custom coded templates built with HubL, while CPQ quotes use a standardized template system that cannot be customized via code.If you’re using CPQ quotes, see Create CPQ quotes for API documentation and customize quotes with branding and templates for UI-based customization options.
For businesses that use quotes during the sales process, a sales rep can create a deal, then create a quote associated with that deal all within HubSpot. The sales rep would then send the quote to a customer using the generated URL or PDF. The prospect then accepts or declines the quote. In some cases payment is exchanged right away, in some cases an e-signature is used. For legacy quotes, you can build custom coded templates to customize the look and feel of legacy quotes. These templates are not available for newer CPQ quotes.

​
Overview

Legacy quote templates are built using the same underlying systems that other types of templates use. For example:
  • Domain-level settings apply, including head and footer HTML and domain stylesheets. You can disable domain stylesheets using template annotations.
  • Most of HubL’s functionality is supported, including functions, filters, if conditions, imports, and includes.
  • When using personalization tokens in a legacy quote, HubSpot will not render them dynamically. Instead, the token is rendered at the time of publishing the quote, and will not update upon signing. For this reason, you should not use personalization tokens for properties that are updated after a quote is published, including:
    • Payment status
    • Payment date
    • Esign date
    • Esign completed signatures
However, due to the specific use-case of legacy quotes, there are some key differences between their templates and page and email templates:
  • More data is available to the legacy quote template that is restricted for other template types. For example, quote and deal-related data is available, and you can include contact data for quote recipients in a quote template.
  • Instead of a drag and drop editor, there’s a module-based editor for customizing or hiding the modules that are already in a legacy quote template.
Because more data is available to quote templates without requiring password protection. You should take care to only expose necessary information.

​
Creating legacy quote templates

Legacy quote templates are contained within legacy quote themes, similar to the relationship between CMS templates and themes. HubSpot provides a set of default modules that you can use in legacy quote templates to enable downloading to PDF form, facilitating payment, and collecting signatures. In addition, you’ll use template variables to access legacy quote data and other CRM data directly from the legacy quote template. To get started, you can create a legacy quotes theme, along with templates, modules, and more, using HubSpot’s boilerplate legacy quotes theme.

​
Custom enumeration properties

Enumeration properties such as dropdown menus, or multiple checkboxes, can be incorporated into legacy quote templates. Learn more about HubSpot’s property types. The JSON returned for custom enumeration properties includes both the internal value and the external label.
Please note:By default, quotes created after September 13th, 2024 will display the property label rather than the internal value.
"custom_properties": {
  "my_custom_property": {
    "label":"Label1",
    "internal":"value1"
  },
  "another_custom_property": {
    "label":"Label99",
    "internal":"value99"
  }
}
For CMS Developers using legacy quotes templates, the crm_property_definition function can be used to retrieve legacy quote property data, and will allow you to replace the label with the value where necessary. 
{% set dealEnum = template_data.quote.associated_objects.deal.deal_enum %}
{% set dealEnumProp = crm_property_definition("DEAL", "deal_enum").options|selectattr('label', "equalto", dealEnum)|first %}
{{ dealEnumProp.value }}

​
Enable e-signatures

In Sales Hub Starter, Professional, and Enterprise accounts, legacy quotes can be configured to include e-signature functionality, which you can enable via the quote_signature module. 
<section class="signature">
  {% module "signature" path="@hubspot/quote_signature" %}
</section>
Because Dropbox Sign renders the print version of a quote for signing, ensure that the signature field is displayed in the print version of the quote. Otherwise, Dropbox Sign will display an error when the user goes to verify their signature.
esignature-error
If you’d like to enable users to print or download the quote, it’s recommended to include the download module. Alternatively, since a quote is a web page you can use JavaScript and a button element to provide an easy way to print the quote. To optimize and style the print and PDF version of a legacy quote template, you can use the @media print media query in the template’s stylesheet. For example, HubSpot’s default Basic quote theme includes the following print styling in the basic.css stylesheet: 
@media print {
  .hs-quotes--basic {
    max-width: unset;
  }

  .hs-quotes--basic .line-items__total-name {
    float: left;
  }

  .hs-quotes--basic .comments,
  .hs-quotes--basic .terms {
    break-inside: avoid;
  }
}
To preview the print version in Chrome:
  • Open the web version of a quote.
  • Right-click the page, then select Inspect.
  • In the top right of the DevTools panel, click the three vertical dots ⋮, then select More tools, then select Rendering.
chrome-settings-more-tools
  • In the Rendering panel, scroll to the Emulate CSS media type section. Then, click the dropdown menu and select print.
chrome-rendering-media-type-print
You can now continue to testing out styling in Chrome. When you’re ready to apply the styling to the template, copy the styles into your @media print media query, then upload the template to HubSpot. Updated styling will only apply to legacy quotes created after updating the template.