Getting started from the CMS quotes theme
With a CMS quotes theme, you can create a custom quote theme for sales reps to use during the buying process. This guide will walk you through cloning the default CMS 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.
Please note: while this tutorial uses the HubSpot CLI, you can do all of this in HubSpot using the design manager if preferred. To complete this process in HubSpot, you'll just need to clone the
cms-quotes-theme in the
@hubspot folder instead of running the
fetch command. shown in step 1.
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 quotes theme, run the following in your terminal:
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 quote theme, including mock data and module defaults within the
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:
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
To 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.
- 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 build your custom quote theme, 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.
As you prepare a custom quotes theme for real life use, you should be mindful of the template label so that sales reps can easily find it among HubSpot's default 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:
- Update the
Boldto a name of your choosing, such as
My custom quote template.
- Save the file to upload it to 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.
- In the upper right, click Save when you're done making changes.
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.
With your quote template created, uploaded, and customized, you should now have a better understanding of the quote template editing process and the content creator experience.
As you create quote templates to fit your business needs, you may want to try adding your own custom modules to the quote along with HubSpot's default modules.
Thank you for your feedback, it means a lot to us.