Help pages - Child theme

A "child theme" is a copy of an original parent theme.

CHILD THEME

You can modify the child theme without altering the father theme.

You can create child themes from HubSpot themes, marketplace themes, and custom themes.

You can create a child theme for the theme you purchased on the marketplace or for a default HubSpot theme in the Design Manager. When you create a child theme from these resources within the Design Manager, the following files will be added to your child theme:

theme.json - this will include the correct extension declaration for linking to the parent theme.
child.css and child.js - these are empty CSS and JS files. The code added to these files will only affect the child theme. You can customize the name of these files in the advanced options section of the child theme creation wizard.

All files that contain the HubL variable standard_header_includes. This usually includes a "base" or "main" template file. You will be able to edit the child theme even if the original theme is not editable.

Here are the steps to create your child theme:

In your HubSpot account, go to Marketing > Files and templates > Design Tools.

In the left sidebar, right-click on your Marketplace theme (located in the @marketplace folder) or HubSpot's default theme (located in the @hubspot folder) and choose Create child theme. (create child theme).

If you open the advanced options, you can also customize the name of the child CSS and JS files that are created with the child theme.
Once the child theme has been created, a success message will appear saying that the child theme is ready.
You should now see your child theme and its contents in the left sidebar.

If you want to copy or clone an existing theme to your site, go to this page to learn how to do it

Yes, as long as the "extends" path is the same in the new portal.

All files are inherited by the parent theme unless they are overwritten in the child theme.

A file in the same relative path as a child theme will overwrite the equivalent file in the parent theme. So, for example, to overwrite @marketplace/parent/theme/templates/about.html you can create /child/theme/templates/about.html and make your changes to the new file. The new file will take effect instead of the inherited file.

When you create a new page, your child theme will appear as an option within the "container" of themes. You can choose the page template you wish to create just as you would with a parent theme

You can replace your page template with the equivalent template from the new theme. For example, replace the landing-page.html template (of the parent theme) with the landing-page.html template (of the child theme). Basically the important thing is that the file paths (with their folders) are the same in parent and child theme

You can change the label of your template by editing the HTML file. The label can be found in a comment at the beginning of your theme file.

Currently it is not possible to create a child theme from a child theme.

The total number of child themes you can have is limited based on your CMS Hub subscription. These limits are as follows:

Marketing/CMS Hub Pro: 5child themes
Marketing/CMS Hub Enterprise: 10 child themes

A "child theme" is a copy of an original parent theme.

CHILD THEME

You can modify the child theme without altering the father theme.

You can create child themes from HubSpot themes, marketplace themes, and custom themes.

FAQ