Getting started from the CMS quotes theme [BETA]

Last updated:

This functionality is in beta and requires your account to be ungated. The primary purpose of custom quote templates is to enable quotes to have proper company brand styling. The quote tool supports some but not all of the functionality that CMS templates support. By participating in this beta you agree to our beta terms. We encourage beta participants to join the beta group on the forums to provide feedback.

In this tutorial you will clone the cms quotes default theme provided by HubSpot. You will then make adjustments to the quote theme to suit your needs. After which you will create a customized quote template. The customized quote template is what the sales representative actually chooses when creating a quote.

Prerequisites

  • You should feel confident writing HTML and CSS.
  • You should have the CMS CLI installed and configured for your portal. This guide will use the CLI for examples. You can do all of this using the Design Manager if preferred, you will just need to clone the cms-quotes-theme in the @hubspot folder instead of running the fetch command.
  • Ensure you are using the latest version of the HubSpot CLI.

Optional helpful resources

1. Fetching the theme to your local directory

Open your terminal, navigate to the directory you want to download the files to. We will be working out of this directory for the remainder of this tutorial. Run the following command:

Shell script
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 the templates themselves and assets such as CSS. Images for the screenshots of the templates. Several included modules. To help facilitate development mock data and module defaults data is provided in the imports folder.

2. Upload and watch changes

You will now upload the folder you just created locally back to the developer file system - watching for any additional updates you make to the files.

Shell script
hs watch "my-quotes-theme" "my-quotes-theme" --initial-upload

Open your Design manager for this account you should now see the "my-quotes-theme" folder in your developer file system.

Tip: You can use a new terminal window/tab and the command hs open dm to open a browser tab to the design manager.

3. Open a template preview

In your design manager navigate to my-quotes-theme > templates > bold.html. In the top right of the code editor you'll see a "preview" button, select that button and choose "Live preview with display options".

4. Make a change

In your local code editor open my-quotes-theme > css > bold.css.

Add the code below to bold.css

CSS
.line-items__table tbody tr:nth-child(odd){
 background-color: #d6d6d6;
}

Save bold.css.

In your browser window that is currently viewing the template preview - refresh to see your CSS change take effect. You will now see every odd row in the table body has a gray background. 

You can make any HTML + HubL, CSS and JavaScript changes you see fit, and preview it in this preview window.

Because of the complexity of the signature system you won't see the signatures display in the preview.

5. Change the template label

If you want sales reps to be able to use your template you will want to set a label that clearly differentiates this quote from the HubSpot default quote options.

On your computer open my-quotes-theme > templates > bold.html.

At the top of the file is the template annotation.

HTML
<!--
 templateType: quote
 isAvailableForNewContent: true
 label: Bold
-->

Change the "label" parameter from "Bold" to "My custom quote template".

Save.

6. Create a customized quote template based on your coded template

Before your coded template can be used by a sales rep, you must create a customized quote template based on your coded template using the UI. The purpose of this customized quote template is that a sales manager can create ready-made quotes that the sales rep can start from. Enabling the sales manager to ensure consistency across the quotes without needing to directly edit the coded template. This prevents human error of a sales rep needing to copy and paste text like legal terms and other common content.

This step doesn't necessarily need to be done by the developer, non-developer focused instructions exist in our knowledgebase. We do advise though creating one a customized quote template yourself as you'll be able to see the editing experience for your quotes. (Creating a customized quote template is required to move on to the next steps in this tutorial).

  1. In the main navigation select the settings gear icon. 
  2. In the left side bar navigate to Objects > Products & Quotes.
  3. Navigate to the "Quote templates" tab.
  4. Select "Create quote template".
  5. Hover over or keyboard navigate to "My custom quote template".
  6. Select "choose".

You are now creating a preset that later a sales rep could use as a starting point when creating a quote.

Similar to CMS Hub the left panel shows the modules you have in your template. You can toggle the visibility of modules by hovering over the module in the left panel; This is useful in the situation that specific common types of quotes don't need all of the functionality offered by the template. Update module content as needed. Then save.

7. Create a quote using your new template

In your browser tab with the Design Manager open, go to the main navigation bar at the top. Sales > Quotes.

Click "Create Quote".

The wizard will guide you through creating a quote. 

Create a deal, you'll use this deal just for testing so the values don't matter.

On the details screen of the wizard, when prompted for "Quote Template" select  "My Custom Quote Template".

Follow the rest of the quote wizard to create your quote.

You've successfully created a new quote template

Congratulations! Continue to tweak your quote template to fit your businesses individual needs. You can add your own custom modules to the template as well as HubSpot default modules.

You're also welcome to edit the modules that we provide in the CMS Quote Theme by default. 

Be aware though that if you modify them you are responsible for ensuring the functionality works. It is best to avoid editing the JavaScript of the payment, signature, and download modules. These modules if broken could make quotes un-signable, prevent downloads, and even prevent payments.


Was this page helpful? *
This form is for feedback on our developer docs. If you have feedback on the HubSpot product, please share it in our Idea Forum instead.