Creating a Child Theme

Creating a child theme from a marketplace theme allows you to add custom changes to CSS, JavaScript, or modules without losing the ability to receive updates from the Marketplace. Here's how the process works and what files are included when you create a child theme:

Files Included in a Child Theme:

  • theme.json: This file contains the necessary extension statement to link your child theme to the parent theme.
  • child.css and child.js: Initially empty, these files are where you can add custom code that will only impact the child theme. You have the option to rename these files during the child theme creation process.

Steps to Create a Child Theme:

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

  2. In the left sidebar, navigate to @marketplace > Sprocket_Rocket, right-click the theme, and select Create child theme.

  3. Provide a name for your child theme, select where you want to save it, and click Create Child Theme.

  4. If you wish, click on advanced options to rename the child CSS and JS files.

  5. Once the child theme is created, you'll see a confirmation message. Your child theme is now ready, and you can click Close to exit.

By following these steps, you can begin customizing your child theme while keeping the core features of the parent theme intact.

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.

 

FAQs

  1. 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.
  2. What assets are inherited from the parent theme? All files are inherited from the parent theme unless they are overwritten in the child theme.
  3. 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.
  4. 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.
  5. 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).
  6. 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.