In this post, I’ll be talking about HubSpot quotes, which are an important part of the sales process and can be easily automated. With just a few clicks, you can send a quote to a client, allowing them to sign electronically, pay through Stripe, or download and print it. This makes HubSpot’s quote feature a powerful tool for businesses.
HubSpot comes with three ready-made quote templates:
- Modern
- Basic, and
- Original.
These templates have different layouts and styles and are automatically filled with details from your deals, contacts, companies, and products.
So, if it’s all automated and simple, why write about it?
Well, HubSpot’s default quotes, while useful, have some limitations. That’s where a developer comes in. For instance, if you want to add extra details like the recipient company’s logo, a unique quote ID number, or the name of the person who created the quote, you’ll need custom development. The list of available quote fields can be found here. To customize these templates, you’ll need to be on HubSpot’s Sales Hub Pro or Enterprise plan.
This blog will walk you through the steps to create custom quotes in HubSpot.
Creating a Quote
By following these steps, you can design quotes that fit your business perfectly.
To create a child theme and add a new variable to your templates, follow these steps:
1. Navigate to the Marketing Tools section in HubSpot.
2. Select “Files and Templates,” then choose “Design Tools.”
3. Open the “cms-quotes-theme” folder under “@hubspot” to view the default template code.
- Image: Navigate to Design Manger
- Navigate to “cms-quotes-theme” in the @hubspot folder
In the “cms-quotes-theme” folder, open the “templates” folder, where you’ll find all the default templates used for quote customization. Since these files are part of a HubSpot theme, they cannot be edited directly in the Design Manager. To modify a template, you’ll need to create a child theme. Simply select the template you want to edit and click the “Create Child Theme” button.
3. Create a child theme by selecting a template and clicking the “create child theme” button
Next, enter a name for the child theme in the “Child Theme Name” field. If needed, you can change the file location in the designated section. The CSS and JS file names can also be modified under the advanced options.
4. Customize child theme options
5. Create child theme successfully
Then, choose the template you want to modify or add a new variable to, and clone it to the child theme. For example, if you want to modify the “basic.html” template, simply right-click on “basic.html” and select “Clone to Child Theme.”
6. To modify the template, clone it to the child theme
From the quote template selection, you can rename the template you just cloned. To do this, go to the “cms-quotes-child-theme” folder in the file location you chose when creating the child theme. Select “basic.html” in the templates folder, and update the label on line 4 (as shown in Figure 8). Don’t forget to publish the changes once you’re done.
7. Cloned template in the child theme folder
8. Rename the template label in line 4
Customize code template
To preview the template you just cloned and modified, navigate to the settings by clicking the settings icon in the top-right navigation bar. Then, select “Objects,” followed by “Quotes,” and choose “Customized Quote Templates” to locate your new template. Refer to the images below for guidance.
1. Click “Customize quote template” to preview changes
2. Hover over the template that we created and modified and click “Preview”
3. Preview of the quote template page
Keep the preview tab open for ongoing development, as it allows you to track any changes you make in real time.
Creating a New Module and Adding It to the Template
To keep the template clean and easy to read, HubSpot recommends first adding variables to a module and then incorporating that module into the template. This approach ensures a more organized and streamlined document.
1. HubSpot prefers adding value to the module and then adds the module to the template
To maintain consistency, we will create a module and add it to the template. In this example, I’ll add a “Unique Quote ID Number” to the template. First, create a module folder by navigating to the “cms-quotes-child-theme,” clicking “File,” and selecting “New Folder in cms-quotes-child-theme.”
13. Create a new folder in “cms-quotes-child-theme” and set the name of the folder
Next, right-click on the “modules” folder you just created and select “New File in ‘modules.’”
14. Create a new file in the “modules” folder and select module as the new file
To use the module in the Quote template, select the “Quotes” option under “Where would you like to use this module?”. Then, enter the module name (unique_quote_id) in the text field, following HubSpot’s naming convention. In the editor, create a text field within the module where the user can add text before the Unique Quote ID Number.
15. Select module purpose and set the module’s name
16. Create a Text field in the module for the text before the Unique Quote ID Text
For the HTML, I added this code:
{# Displays the Unique quote ID number #}
{% from ‘../../imports/mock_data.html’ import SAMPLE_TEMPLATE_DATA as mock_data %}
{% set QUOTE = template_data.quote || mock_data.quote %}
{% set UNIQUE_QUOTE_NUMBER = QUOTE.hs_quote_number %}
{{ module.unique_quote_id_text }} {{ UNIQUE_QUOTE_NUMBER }}
The QUOTE variable holds all the quote data, sourced from template_data or mock_data, and I’ve set UNIQUE_QUOTE_NUMBER as the Unique Quote ID within that data.
The {{ module.unique_quote_id_text }} will retrieve and display the user’s input text on the template. After publishing these changes, we’ve successfully created a new module to display the unique quote ID number.
Now, to add this module to the quote template, scroll down the right panel in the module editor, and copy the code snippet found in the “Template Usage” section.
17. Copy the snippet in the template usage section
Next, open the basic.html template and paste the code you copied into line 37, just below the “quote expires” module. Finally, publish the changes.
18. Paste the code you copied in the snippet to the module
You can now view the new changes in the template preview.
To change the text before the Unique Quote ID number, return to the step in Figure 10 and click the “Choose” button. On the left panel, select the Unique Quote ID, then modify the text from “Unique Quote ID” to “Quote ID.” You will see the changes immediately.
If you want to view all the variables, you can add the following code to your template and check the variables in the preview tab:
<section>
<p>Showing all variables</p>
{{template_data|pprint}}
</section>In summary, this is how you can customize and add HubSpot Quote variables to a quote template. I hope you found this step-by-step guide helpful. If you have any questions, feel free to reach out to us. We’re always here to assist with HubSpot development matters.
