Skip to main content
This documentation covers legacy quote themes only. Legacy quotes support custom coded themes 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.
With a CMS legacy quotes theme, you can create a custom legacy quote theme for sales reps to use during the buying process. This guide will walk you through cloning the default CMS legacy quotes theme locally using the CLI, uploading the clone to your account, then making adjustments as needed. You’ll then create a quote using the template to view your work.

​
Prerequisites

​
Fetch the theme

Open your terminal, navigate to the directory you want to download the files to. This will be your main working directory for the remainder of this tutorial. To download the default legacy quotes theme, run the following in your terminal: 
hs fetch @hubspot/cms-quotes-theme "my-quotes-theme"
You should now see a folder named my-quotes-theme in your local file system. This folder contains all of the assets needed for the legacy quote theme, including mock data and module defaults within the imports folder.

​
Upload and watch for changes

With the folder downloaded, upload it to HubSpot. While you can use the hs upload command to perform a single upload, you can instead use the watch command to trigger automatic uploads on each file save: 
hs watch "my-quotes-theme" "my-quotes-theme" --initial-upload
After upload, you can now view the my-quotes-theme folder in the design manager. To open the design manager from the terminal, open a new terminal tab or window and run the hs open dm command.
A new terminal tab or window is needed because you cannot run commands while the hs watch process is running. You can also press q to end the watch, run another command, then rerun hs watch.

​
Preview the quote template

  • In the design manager, navigate to my-quotes-theme > templates > bold.html.
  • In the top right of the code editor, click Preview, then select Live preview with display options.
With the template preview open, you’ll then make a change locally, which will be automatically uploaded on save due to hs watch running.

​
Make local changes

  • In your local code editor, open my-quotes-theme > css > bold.css.
  • Add the code below to bold.css, then save your changes:
.line-items__table tbody tr:nth-child(odd) {
background-color: #d6d6d6;
}
  • Refresh the template preview in your browser to view your CSS changes. You should now see that every odd row in the table body has a gray background.
As you continue to build, you can repeat this workflow to quickly confirm the changes that you’re making locally.
Please note:Because of the complexity of the signature system, signatures will not display in previews.

​
Update the template label

Update the template label so that sales reps can easily find it among HubSpot’s default legacy quote options. To change a quote template’s label:
  • In your code editor, open my-quotes-theme > templates > bold.html.
  • At the top of the file, view the template annotation:
<!--
templateType: quote
isAvailableForNewContent: true
label: Bold
-->
  • Update the label parameter from Bold to a name of your choosing, such as My custom quote template.
  • Save the file to upload it to HubSpot.

​
Customize the template in HubSpot

Before a sales rep can use your quote template, it must be customized in HubSpot. This would typically be done by a sales manager so that they can create ready-made quotes for their sales team. However, in this tutorial, you’ll walk through this process yourself so that you can understand what the content creation experience is like. To customize the quote template and make it available for sales reps:
  • In your HubSpot account, click the settings settings icon in the main navigation bar.
  • In the left sidebar menu, navigate to Objects > Quotes.
  • Click the Quote templates tab.
  • In the upper right, click Customize quote template.
  • Hover over your new template, then select Choose.
  • Using the left panel, you can edit the modules included in the template. For example, you can click a module to edit its properties or toggle visibility.
quote-template-toggle-visibility
  • In the upper right, click Save when you’re done making changes.

​
Create a quote in HubSpot

With your changes saved, you can now create a quote with the template, simulating the sales rep experience.
  • In your HubSpot account, navigate to Sales > Quotes.
  • In the upper right, click Create quote. You’ll then be redirected to a quote creation wizard.
  • On the first screen, click the Associate with a deal dropdown menu, then either select an existing deal or select Create a new deal if you want to use a test deal instead.
  • In the bottom right, click Next.
  • On the next screen, click the Quote dropdown menu, then select your custom quote template.
  • Proceed through the rest of the quote wizard to create your quote.
  • After publishing the quote, a dialog box will appear with a link to view the quote. Click Copy to copy the URL, then paste it into your browser to view the completed quote.
copy-quote-url
Please note:When customizing legacy quote modules, it is not recommended to edit the JavaScript of the payment, signature, and download modules, as this could lead to breaking the modules. If broken, the end-user might not be able to sign it, download it, or even make a payment.