Child themes

Marketplace themes are not directly editable. That's a good thing, because it keeps the original files untouched so you can install theme updates.

The downside is that it's not recommended to use the original parent theme directly for your website. The moment you want to add a new module, edit a file, or change something in the code, you won't be able to.

That's why creating a child theme from the start is highly recommended, and it's one of the most important steps in our Getting started guide.

What is a child theme?

A child theme is an editable copy of the parent theme, with its own theme settings and global content (Header, Footer, etc.). It acts and appears as a separate theme in HubSpot, and you can extend it with your own modules and files.

How to create a child theme?

To create a child theme, go to the Design Manager and right-click on the parent theme folder, then select Create child theme.

Give a recognizable name to your new theme (e.g., Act3-child) and make sure you are using this theme for your website, not the parent theme.

How to extend and customize a child theme safely?

By default, a child theme inherits all of the parent theme's files behind the scenes, so they don't appear in the Design Manager.

To modify one of these files, you first need to clone it from the parent theme into your child theme. Find it in the parent theme and right-click on it, then select Clone to child theme.

From that point on, your child theme uses your local copy instead of the inherited file.

This comes with an important tradeoff. Once a file is cloned, it will no longer receive updates, because HubSpot won't overwrite your changes, and you wouldn't want it to. So only clone a file when you actually need to edit it. Fewer cloned files means more automatic updates, less manual work, and fewer conflicts.

In fact, we recommend avoiding cloned files altogether. If you delete a file you've cloned from the child theme (same path, same name), HubSpot will fall back to using the original file from the parent theme.

If you just want to add your own CSS or JavaScript, the better approach is to use the files HubSpot creates automatically when you set up your child theme in the root folder: child.css and child.js. You can safely edit these to add your own styles and scripts.

If you need to change a module, clone it and rename it to something else, so the original stays in place for future updates. If that module references a CSS or JS file you also want to edit, clone and rename that file too, then update the reference in your cloned module. This way you keep the originals intact for updates while editing your own copies in the child theme.

How to update a child theme?

Since the child theme inherits all files from the parent theme, it's updated automatically whenever you install an update. The only exception is the files you've cloned into your child theme (same path, same name). Those won't update automatically.

To update them, you have two options. You can delete your clones, which loses your changes but lets the theme fall back to the original files from the parent theme. Or you can manually compare each cloned file against the parent theme's version and apply the changes yourself, which may be a lot of work and prone to errors.

That's why we recommend avoiding cloned files altogether, as described in the previous section.

For more information about updates, please check our Theme updates guide.

How many child themes can be created?

The total number of child themes you can have is based on your HubSpot subscription. For the exact number, please check this HubSpot article

What is the active theme?

The active theme isn't necessarily the one used on your live pages. It's just the default theme you'll pick templates from when creating new pages. Changing it won't affect your existing pages. Learn more in HubSpot's guide.