Getting started from the CMS quotes theme
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.
- 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
@hubspotfolder instead of running the fetch command.
- Ensure you are using the latest version of the HubSpot CLI.
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:
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.
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.
Tip: You can use a new terminal window/tab and the command
hs open dm to open a browser tab to the design manager.
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.
Because of the complexity of the signature system you won't see the signatures display in the preview.
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.
Change the "label" parameter from "Bold" to "My custom quote 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).
- In the main navigation select the settings gear icon.
- In the left side bar navigate to Objects > Products & Quotes.
- Navigate to the "Quote templates" tab.
- Select "Create quote template".
- Hover over or keyboard navigate to "My custom quote template".
- 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.
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.
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.
Thank you for your feedback, it means a lot to us.