Creating a Child Theme
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 extended statement for linking to the parent theme.
- child.css and 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.
- In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
- In the left sidebar, navigate to @marketplace > Sprocket_Rocket and right-click on the theme and click 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.
Cloning files to Child theme
After creating the child theme, if you need to customize / edit the code of a module it is important to clone it from the main marketplace theme to the child theme. This also makes it easier for the support team to push quick fixes to the module when reported. To do that follow the steps below:
- Navigate to @marketplace > Sprocket_Rocket > sr-theme and right click on the file/module you wish to customize and click Clone to child theme.
Can I copy a child theme to another HubSpot account if the parent theme is from the Asset Marketplace? Yes, as long as the “extends” path is the same in the other HubSpot account.
What assets are inherited from the parent theme? All files are inherited from the parent theme unless they are overwritten in the child theme.
How can I override a particular asset from the parent theme? A file in the same relative path of a child theme will overwrite the equivalent file from the parent theme. So, for instance, to overwrite @marketplace/parent/theme/templates/about.html you can create /child/theme/templates/about.html and make your edits to the new file. The new file will take effect instead of the inherited file. This applies to your fields.json file as well as other files in the theme.
How can I create new pages using the child theme? When you create a new page, your child theme will appear as an option under Your Themes on the theme selection screen. Learn more about creating pages using themes in the Knowledge Base.
How can I edit an existing page to use a child theme instead of the parent theme? You can replace your page template with the equivalent template from the new theme. For instance, replace the template landing-page.html (in the parent theme) with the template landing-page.html (in the new theme).
How can I edit a template’s label on the page creation screen? You can change the label of your template by editing the HTML file. The label is located in a comment at the top of your theme file.