English

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

CHILD THEME

You can edit the child theme without altering the parent theme.
You can create child themes from HubSpot themes, marketplace themes, as well as custom themes.

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

  • theme.json - this will include the proper extends statement for linking to the parent theme.
  • child.css e child.js -this is an empty CSS and JS file. 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.

Any files that contain the standard_header_includes HubL variable. 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.

child_theme2

You will be able to edit the child theme even if the original theme is not editable.

To create a child theme for a Marketplace or HubSpot Default theme in the Design Manager:

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • In the left sidebar, right-click on your Marketplace (located in the @marketplace folder) or HubSpot default theme (located in the @hubspot folder) and choose Create child theme.
  • Enter a name for your child theme, choose the location of the theme, and click 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 your child theme. 
  • Once your child theme is created, a success message will appear telling your child theme is ready to go. You can now Click Close.
  • You should now see your child theme and its contents in the left sidebar.

We used a child-theme to show you what the site looks like with the left side menu. Go to this link to take a look.

child_theme