Custom quote templates

Last updated:
APPLICABLE PRODUCTS
  • Sales Hub
    • Professional or Enterprise

In the sales process, a sales rep creates a deal, then the sales rep creates a quote associated with that deal. The sales rep sends the quote URL or PDF to a prospect. The prospect then accepts or declines the quote. In some cases payment is exchanged right away, in some cases an e-signature is used.

Please note: you can create custom quote themes and templates with any HubSpot subscription, including CMS Free, but an account will need Sales Hub Professional or Enterprise to use those templates for their quotes.

If you previous built proposal templates, learn how to migrate an existing proposal template to quotes.

Overview

Custom quote templates are built using the same underlying systems that other types of templates use. For example:

  • Domain-level settings apply to quotes, including head and footer HTML and domain stylesheets. You can disable domain stylesheets using template annotations.
  • Most of HubL's functionality works on quote templates, including functions, filters, if conditions, imports, and includes.
  • When using personalization tokens in a 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

Due to the specific use-case of quotes, however, there are some key differences between how quotes work from the way page and email templates work:

  • More data is available to the quote template that is restricted for other template types. For example, quote and deal-related data is available to a quote template. You can also include contact data for quote recipients in a quote template.
  • There is not currently a drag and drop editor for building quote templates. Instead, there is a module-based editor for customizing or hiding the modules that are already in a template.

Because more data is available to quote templates without requiring password protection. You should take care to only expose information that is truly required for the purpose of the quote.

Custom enumeration properties

Enumeration properties such as dropdown menus, or multiple checkboxes, can be incorporated into custom quote templates. See a list of all property types here.

The JSON returned for custom enumeration properties includes both the internal value, as well as 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 custom quote templates, the crm_property_definition function can be used to retrieve 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, quotes can be configured to include e-signature functionality. To enable this for custom quote templates, add the quote_signature module to the quote template.

<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 your quote. Otherwise, Dropbox Sign will display an error when the user goes to verify their signature.

esignature-error

Print and PDF versions of custom quotes

If you'd like to enable users to print or download a 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 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 quotes created after updating the template. Existing quotes using the template will not be updated.

Related Resources

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.