CPQ Quote Templates - Cannot Apply Custom CSS Styling

Develop, Build & Integrate CMS Development
1

Hi HubSpot Support Team,

I’m trying to migrate a custom-branded quote template from Legacy Quotes to CPQ Quotes and facing blockers.

What We Have (Working in Legacy Quotes)

A Consumables quote template with:

  • Custom CSS styling (custom font, brand colors, gradient header)
  • Custom object integration for shipping addresses
  • Auto MOQ (Minimum Order Quantity) notes for specific SKUs
  • PDF-optimized layout

This works perfectly with Legacy Quotes.

What We’re Trying to Achieve

Use CPQ Quotes while keeping our custom branding - same colors, fonts, and layout.

What We’ve Tried

Attempt 1: Custom HubL Template

  • Created custom coded template like our legacy version
  • Result: CPQ quotes don’t render it - shows blank or default styling

Attempt 2: Hybrid Approach (Based on Breeze AI Suggestion)

Breeze suggested:

“Extract CSS to child.css files, wrap CPQ modules with custom classes”

We created:

  1. child.css - Custom styling extracted
  2. Template - Native CPQ modules wrapped in custom containers

hubl

<div class="custom-quote-wrapper"> {% module "quote_header" path="@hubspot/quote_header" %} {% module "quote_line_items" path="@hubspot/quote_line_items" %}</div>

Result: Modules render with default HubSpot styling - our CSS doesn’t apply

Questions

  1. Is it possible to apply custom CSS to CPQ quote templates? If yes, how?
  2. Can we use custom HubL code in CPQ templates, or is it visual builder only?
  3. Is the hybrid approach valid? If so, what are we missing?
  4. What’s the recommended path for custom-branded quotes + CPQ functionality?

Current Understanding (Please Confirm)

Feature Legacy Quotes CPQ Quotes

Custom HubL templates :white_check_mark: Yes :cross_mark: No?
Custom CSS styling :white_check_mark: Yes :red_question_mark: Unclear
Quote Approvals :white_check_mark: Yes :white_check_mark: Yes

Looking forward to clarification on the correct approach.

Thank you!

2

Hi @Technix and a big warm welcome from the HubSpot Community! :orange_heart:
Thanks for reaching out!
To reply to your questions, you’re absolutely right in your understanding!
When looking at the documentation, it confirms that Legacy quotes offer full flexibility for custom coded templates using HubL, custom CSS, and advanced customization, while CPQ quotes are built on a standardized template system that doesn’t allow for direct code-level changes.

To answer your specific questions:

- Custom CSS in CPQ templates: This is currently not supported, as CPQ quotes don’t allow custom HubL or CSS templates.
- Custom HubL in CPQ templates: This is also not supported, CPQ uses a visual builder and UI-based approach only.
- Hybrid solutions: Wrapping CPQ modules in custom CSS is not an option since CPQ uses a different rendering engine.
If you’re looking for custom-branded quotes with CPQ functionality, the available options are focused on the UI-based customization settings in HubSpot.
Your summary table is spot on.
If you need advanced custom branding or custom object logic, Legacy Quotes remains the best choice for now.
Here are the resources for you:
- Legacy quote templates
- Create CPQ quotes
- Getting started with the CMS legacy quote theme
If there’s anything else you want to achieve or explore, feel free to let us know, happy to point you in the right direction!

Have a lovely day!
Bérangère
This post was created with the assistance of AI tools

3

Hi @Technix, our app DocuGen can produce your Consumables quote with the same custom font, brand colors, gradient header and PDF layout, because it generates the document from your own Word template. @Berangere is right on the CPQ side. With DocuGen, anything you can design in Word comes out as designed, filled from the deal with its line items in as many columns as you need. HubSpot quote properties are also available as placeholders. The finished PDF saves to the deal’s attachments, and your team uses it with their HubSpot login, all without leaving HubSpot.

Take a look at our marketplace listing.

P.S. The free plan covers up to 400 documents a month with no watermark, and unlimited users, so your whole team can use it at no cost.