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.

• You should feel confident writing HTML and CSS.
• You should have the latest version of the HubSpot CLI installed and configured for your portal. 

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 imports folder.

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:

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.

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.

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 label parameter from Bold to 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. 

• Custom quote templates
• Custom quote variable reference
• Create and use custom quote templates (from the sales, sales ops/manager perspective)