The DevTeam Blog

How to Create a Child Theme in HubSpot CMS

Written by Roberto Pacheco | July 29, 2025

If you’ve downloaded our theme from the HubSpot Marketplace and want to customize it safely—without losing your changes after updates—creating a child theme is the way to go.

In this post, we’ll walk you through what a child theme is, why you need one, and how to create one step-by-step inside HubSpot CMS.

 

What is a Child Theme?

A child theme is a separate theme that inherits everything from a parent theme (in this case, the theme you downloaded). You can override templates, modules, styles, and add custom functionality—without modifying the original files.

This means you can safely update the parent theme when new versions are released, without losing your custom work.

 

Step-by-Step: Creating a Child Theme

1. Open Your HubSpot Design Tools

Go to Marketing > Files and Templates > Design Tools in your HubSpot portal.

 

2. Create a Child Theme Folder

Right-click the folder where you’d like to store your theme (e.g., /themes/) and choose:

New file > Theme > Child theme

In the dialog, you’ll need to:

  • Name your child theme folder, e.g., my-custom-child-theme

  • Select the parent theme – this will be the theme you downloaded from the Marketplace.

Click Create child theme.

 

3. Understand the Child Theme Structure

HubSpot will automatically create a folder with the following:

  • A theme.json file that references the parent

  • Empty folders for modules, templates, and assets

Example theme.json

{
  "label": "My Custom Child Theme",
  "screenshot_path": "../parent-theme/images/screenshot.png",
  "parent_theme_path": "../parent-theme"
}
🔎 Note: You don’t need to copy all files. HubSpot uses everything from the parent unless you override a specific file.

 

4. Start Overriding Templates or Modules

Want to customize a template?

  1. Copy the file from the parent theme into your child theme.

  2. Edit it directly in the child theme folder.

You can override:

  • Templates (e.g. blog.html, page.html)

  • Modules

  • CSS / JS assets

  • Global partials

HubSpot will automatically use your child version when it exists.

 

5. Apply Your Child Theme

Now that it’s ready, you can use your child theme just like any other theme:

  • Create new pages using the child theme templates

  • Apply the child theme to your blog

  • Customize it with theme fields in the page editor



Benefits of Using a Child Theme

  • Safe Updates – Keep parent theme updates separate from your customizations

  • Clean Workflow – All your overrides live in one organized place

  • Full Flexibility – Customize layouts, modules, styling, and scripts freely

Pro Tips

  • Always test your overrides thoroughly.

  • Avoid renaming folders/files from the parent unless you fully control usage.

  • Document what you’ve customized for easier team collaboration.

A child theme gives you the flexibility to make a theme truly your own—without compromising upgradability. Whether you’re tweaking layouts or extending functionality, this is the best practice path to scaling your website design.