HubSpot websites, like those on other platforms, run on templates and themes. After naming a page, the second step in creating a HubSpot page is choosing a template.
HubSpot’s earlier design systems—versions 1 and 2—used standalone “templates.” These templates could be coded, but more commonly, they were built using a drag-and-drop interface in the Design Manager. While templates could be grouped into folders and share assets, there was no overarching theme system to connect them or enforce global styling.
With version 3 of HubSpot’s design system, the drag-and-drop template builder was replaced with fully coded files, and a true theme system was introduced. This change brought a number of benefits:
This shift does introduce more complexity, particularly for developers, since building a theme requires a proper file structure and understanding of HubL, HTML, CSS, and JavaScript.
To create a theme, you'll need:
Templates in themes are coded files that often include:
Most theme templates extend a base layout file, typically found in the templates/layouts folder (e.g., base.html). This layout file usually defines shared elements such as
{% block header %}{% endblock %}
{% block footer %}{% endblock %}
Individual page templates extend this base file and overwrite the {% block content %} block with page-specific modules and structure.
Note: Layout templates like base.html are not directly available for new content creation—they serve as structural scaffolding.
Partials are reusable template fragments that store sections of layout, such as headers and footers. It’s common to see files like header.html and footer.html used within {% block header %} and {% block footer %} sections in your layout files.
Custom modules are the heart of HubSpot’s content editing experience. They are both code-based and GUI-driven. Modules consist of:
HubL is limited to the HTML section, but you can use require_css and require_js HubL tags to dynamically load assets based on field values.
Modules can also:
If you're planning to build your HubSpot website from scratch (or using a boilerplate), there are a few levels of quality to consider:
You can build a HubSpot site using mostly raw HTML, CSS, and JavaScript. Even menus and links can be hard-coded. The only strict HubL requirements in a HubSpot template are:
If you're linking to CSS or JS files, it's best to use the file's public path, which you can find in the Design Manager by right-clicking the file.
However, this approach defeats the purpose of using a content management system. Each page’s content is hard-coded, making the templates non-reusable and any updates developer-dependent. It's considered a poor practice and low-quality method.
This method builds on hard-coded templates by replacing static content with HubSpot's default modules—like Text, Rich Text, Image, and Heading—inserted directly into the HTML. This allows for some editable content in the Page Editor, but the layout remains fixed.
While better than full hard-code, it's still a static editing experience. Users can update content, but they can't rearrange or restructure the layout.
Flexible columns allowed entire sections to behave like editable containers. Modules within flexible columns stack vertically and can be added, removed, or reordered in the Page Editor.
While a powerful tool at the time, flexible columns are now largely deprecated in favor of more robust drag-and-drop functionality. Still, you'll occasionally see them in older custom themes.
This is the modern standard for HubSpot development. Templates use HubL to define a layout grid, allowing editors to add sections, columns, and modules dynamically within that grid in the Page Editor.
Modules for drag-and-drop should be cell-based—not row-based, like those used with flexible columns. I typically build in container and spacing controls, though sections and columns often handle that as well. Building modules that work as full-width rows and adapt to fit in columns requires responsive design considerations. One effective solution is to add responsive breakpoint controls in module settings, so content behavior can adapt based on screen size.
Today, any high-quality theme should be built using the drag-and-drop system—including blog templates, landing pages, and website pages. If someone offers you hard-coded or HubL-injected templates, it’s best to politely decline. Flexible columns may still work, but for the most longevity and best editing experience, drag-and-drop templates are the way to go.
Custom development usually starts with a specific design in mind. That means you may not need all the versatility and bells and whistles of a marketplace theme built for broad use. Still, your theme needs to empower content editors to easily build and update pages.
If you do too little to create a robust editing experience, you'll end up doing dev work for every small change. If you do too much, you’ll pay a premium for flexibility you may never use. For example, do you need a theme setting to change the site background color if your design already dictates a fixed color? Maybe, maybe not.
Theme development involves striking a balance between performance, flexibility, and editor experience.
HubSpot provides a boilerplate starter theme, which includes standard wrappers, starter modules, templates, and a solid set of theme settings. It’s a great base to build on, though I typically expand it with additions like mobile font styling.
HubSpot also offers a CLI (command line interface) via Node.js and npm. It allows developers to:
While you can create editable fields in code using JSON, I find it easier to generate them via the Design Manager GUI, which auto-generates the required JSON behind the scenes. I often toggle between local and in-HubSpot development to optimize speed and flexibility.
Creating a functional HubSpot theme is straightforward:
For global areas—like headers, footers, or blog subscribe sections—use global modules. These must be designated as global when first created (this setting can't be changed later). Editable fields should still be used inside these modules to control content like:
Global module content is edited via the Global Content Editor, and updates affect all instances site-wide.
A custom theme typically takes 10–60 hours to build, depending on complexity. That can get expensive. I usually only recommend custom development when:
I regularly work on custom themes (including many of my own live on the web), but I advise only pursuing this route if it makes strategic sense.
Next up: In the next section, learn how to save time and money by skipping full custom development when it’s not necessary.
HubSpot’s marketplace themes are an excellent choice for most website development projects.
Disclaimer: I’m not affiliated with the creators of any themes I mention. I don’t receive payment or bonuses for recommending them—in fact, I potentially lose billable hours by promoting them. But I still do it, because it just makes sense.
Development costs money. A skilled HubSpot developer typically charges around $85/hr. If you need a 7-template website design built from scratch, that might take 40 hours, totaling $3,400—and that’s just development, not project management or revisions. And even then, a custom build often lacks the polish, flexibility, and configuration options that high-end marketplace themes provide.
In contrast, a premium marketplace theme often costs $1,000 for lifetime use in a single portal. These themes come fully loaded with:
In essence, you’re getting a $20,000–$30,000 website with enterprise-grade polish for about $1,000 and 3 hours of setup time.
Even if you're new to HubSpot, a qualified contractor can complete the theme setup (cloning, configuration, and page creation training) in 1–3 hours, compared to 40+ for a custom build.
If your theme is missing something—like a quote calculator, timeline, or testimonial slider—a developer can usually create that module in 1–4 hours. For example:
Most modules are simple and fast to produce, especially if the rest of the site is theme-based.
That’s sometimes true—especially for free themes. Free themes may be poorly built, lack support, and include minimal styling options. But many paid themes are highly optimized for performance, accessibility, and flexibility. I only recommend those that are:
Customization is absolutely possible—but it's important to distinguish between technical flexibility and design compatibility. Most themes are highly flexible within the system they were built for. That means if you design your site using the theme’s provided Figma file, you can implement that design without workarounds.
The most common limitation is customizing headers and footers, especially when trying to match a main site hosted on another platform. In these cases:
This is a valid concern. If you use a theme without customization, your site might look like other HubSpot or Bootstrap-based sites. However:
Not compared to custom development. A $1,000 theme plus a few hours of setup is a fraction of what it costs to build a site of the same quality from scratch. Time-wise, you’re looking at 1–5 hours vs. 6–8 weeks.
The following themes are recommended because they consistently score well on tools like Google PageSpeed and GTMetrix. They're HubSpot user favorites for customizability, ease of use, and available features. Each has a comprehensive component catalog, and most include Figma files for planning your page layouts.
These themes aren’t free—but they’re worth far more than their price tag.
Power Pro is my personal favorite. The settings are intuitive and focused, but still provide enough control to build a completely unique and branded experience.
Clean Pro is a client favorite. I think this is largely thanks to Helpful Hero’s excellent onboarding content—videos, guides, and more—to help you get comfortable with the theme. The settings can be a little overwhelming at times, but that complexity unlocks an incredible amount of control over the design.
Neambo has been developing HubSpot themes for years. I remember using one of their older themes back in the pre-drag-and-drop era. This latest version, Act3, brings their experience forward—it’s well-designed, updated for modern HubSpot workflows, affordable, and feature-rich.
Every HubSpot marketplace listing includes a “What’s Included” section. Read through a few listings and compare. Choose a theme that covers your immediate needs, but also keep in mind what might be missing—and what would need to be added via custom development.
Once you purchase a theme, it will appear in your Design Manager, typically under the @marketplace folder, in a subfolder named after the theme provider.
Marketplace themes offer immense value when used correctly. They slash development time and cost, reduce complexity, and still leave room for deep customization—especially when you're working with a developer who understands how to make the most of HubSpot’s framework.
In most cases, starting with a well-built marketplace theme is the smartest move. With a little configuration, you can deliver results that rival high-end custom builds—without the high-end custom build timeline or price tag.