<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=622264931504426&amp;ev=PageView&amp;noscript=1">

Convert cloned theme into child theme

HubSpot introduced child themes back in April 2021.

Before this new feature, we often cloned the original theme folder to customize or edit a theme purchased/downloaded from the marketplace. 

The problem with this approach is that the cloned folder is completely disconnected from the HubSpot marketplace, meaning you won't get any future updates when the theme provider pushes a new version. 

The good news is, the new child theme feature allows us to reconnect the cloned theme folder back to the original theme folder.

Here are the steps:

  1. Open Design Tools
  2. Navigate to the original theme folder inside the @marketplace folder (in this example, we're using Hatch Lite)
  3. Right click > Copy path

    theme-copy-path
  4. Open theme.json file inside your cloned theme folder
    cloned-theme-folder
    In this example, Hatch_Lite child is our cloned theme folder.
  5. Type the following line of code into theme.json
    "extends" : "[path goes here]"

    Note: Replace [path goes here] with the path you copied from the original theme folder. 

    Once updated, your extends should look like as follows:
    child-theme-extends
  6. Save.