BETA

Use custom proposal templates with quotes (BETA)

Last updated: December 4, 2020

In Beta

Applies to:

Marketing Hub  Professional, Enterprise
Sales Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise

When creating a quote to send to a prospect, you can create a custom proposal template. You can customize the template's HTML, CSS, and JavaScript in the design manager so that your quotes match your business’s needs. Once a template has been customized and published, your sales team can select the template when creating their quotes. They can also customize the theme styles for the quote from the quote builder.

This option is useful if you have a default template that you frequently use to create proposals. These proposals might be many pages in length and contain additional details about your product or service.

Please note: you must be a user in either a Marketing Hub or CMS Hub Professional or Enterprise account with Edit code templates & modules permissions and have an assigned Sales Hub Professional or Enterprise paid seat to use custom proposal templates.

Templates that you create while this feature is still in beta will likely need to be adjusted when this feature is no longer in beta. HubSpot will provide more information about what changes may been needed as this feature develops. 

Create a custom proposal template

HubSpot provides two default proposal templates in the @hubspot folder in your design manager: Quote (Simple) and Proposal (Tall). You can clone and edit these default templates to customize the proposal's copy and design. It is recommended to work with a designer on your team to make changes to the HTML, CSS, and JavaScript of the proposal templates. To access the proposal templates for cloning and editing:

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • In the finder on the left side, navigate to the @hubspot folder. This folder contains all of your themes, including the proposal templates.
  • Right click on the cms-proposals-themes, then select Clone theme.

clone-cms-themes-folder

  • In the dialog box, enter a name for your cloned theme and click Create.

enter-name-cloned-proposals-file

  • The cloned theme will be copied into the root folder and will be listed in the finder with your other folders. Within the cloned theme file, click the templates folder, then select the proposals_tall.html or quote_simple.html template to edit.

select-the-proposal-template

  • Here, you can make edits to the coded template. It is recommended to work with a designer on your team or someone who is proficient in HTML, CSS, and Javascript to make edits to the template. For additional resources on custom design, you can refer to HubSpot's developer documentation.

edit-html-proposal-template

  • When you're done, click Publish changes.

The edited proposals template will be available in the quote template dropdown menu in the quote editor. While in the design manager, you can make any additional changes to the cloned theme. Learn more about using themes

Use the custom template to create a quote

You can use the custom template that you created in the design manager to create a quote. 

  • In your HubSpot account, navigate to Sales > Quotes.
  • In the top right, click Create quote.
  • To associate the contact with a deal, click the Associate with a deal dropdown menu and select a deal.
  • Click Next.
  • Click the Quote template dropdown menu and select a proposal template.
  • To select a custom domain for the quote's URL, click the Domain dropdown menu and select a domain. By default, the content slug uses a unique date and quote ID and does not need to be customized.

select-a-proposal-template-from-quotes-editor

  • In addition to customizing the template and theme in the design manager, an individual user on your team can edit the theme's display settings from the quote builder. Click the theme previewer hyperlink below the quote preview.

edit-quote-theme-styles

  • The theme preview will open in another tab in your web browser. In the left sidebar menu, you can edit the display, color, and font settings.
    • In your Display settings, you can choose to show or hide the line items and letterhead information on your quote.
    • In your Global color settings, you can edit the theme's primary, secondary, and background color for all of the elements included in your theme templates. You can also customize the theme's button colors and fonts.
    • In your Global fonts settings, you can edit theme's primary font and font color.

edit-quote-theme-settings

  • Click Apply changes, then click Publish to [number] assets in the upper right.
  • Navigate back to the quote editor and continue to set up your quote.

After publishing your quote, learn how to share your quote with your contacts.