A child theme is a copy of an original theme (whether it’s from the HubSpot Asset Marketplace or custom created for your portal) that allows you to edit a theme without changing the original. It’s a great way to create multiple branded versions of a theme if you have different brands in your portal.
If you're using marketplace theme, a child theme allows you to edit files and add custom code while still allowing you to receive updates from the theme author. When using a marketplace theme, it’s a great practice to create and use a child theme of it in case you need custom development.
Keep reading to learn everything you need to know about child themes.
Creating a Child Theme
To create a child theme, start by navigating to Marketing > Files and Templates > Design Tools from the portal menu.
Once in design tools, locate the theme folder and right-click on it. If using a marketplace theme, find the @marketplace folder in the left-hand sidebar, click on the folder named with the company/author of the marketplace theme, and right-click on the theme folder. Select Create child theme from the dropdown.
Cloning and Editing a Template File
Creating a child theme does not clone every single file from the original theme, only the files necessary to make custom script and style changes. If you want to edit other files, like templates and modules, they must be cloned into the child theme. Remember that cloned modules and templates in a child theme are separate from the original files. They will not receive any changes made to the originals and, if using a marketplace theme, cannot download any updates the theme author provides for the original module and template files.
To clone and edit a template file, go to the original theme and locate the file you want to edit. Right-click on the file and choose Clone to child theme.
This will open a dialog to choose the child theme to which the file will be cloned. Select the child theme and click Okay.
Navigate back to the child theme and locate the cloned file. Click to open it and make any changes you want. When you're done, click the orange Publish changes button in the top right.
If you want to use the child theme in a website page, landing page, blog post, or blog listing, it will be selectable from the theme selection window either while creating a page, changing the template from the page settings, or changing the template from the blog settings.
Search for the theme with the name given to the child theme, click on it to select the theme, and then select the template you want to use from the template selection window.
To use a child theme on a system template, navigate to the System Pages settings page and select the child theme template from the available dropdowns (the path will include the child theme's name so it can be easily searched for).
Now that you’re using a child theme for your website, it’ll keep the original theme intact either for use in other child themes, for a possible redesign in the future, or to keep receiving updates from an Asset Marketplace listing.