> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 7570fe09-54b1-4d2a-9980-d1803d4bfdc1
---

# Child Themes

> A child theme is a copy of an original parent 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.

export const SupportedProducts = ({marketing, sales, service, cms, data, commerce, marketingLevel, salesLevel, serviceLevel, cmsLevel, dataLevel, commerceLevel}) => {
  const translations = {
    description: "Requires one of the following products or higher.",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub",
      data: "Data Hub",
      commerce: "Commerce Hub"
    },
    tiers: {
      free: "Free",
      starter: "Starter",
      professional: "Professional",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }, {
    name: data ? translations.productNames.data : '',
    level: translateTier(dataLevel),
    icon: "https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/subscription_key_icons/operations_icon.svg",
    alt: "Data Hub"
  }, {
    name: commerce ? translations.productNames.commerce : '',
    level: translateTier(commerceLevel),
    icon: "https://developers.hubspot.com/hubfs/Knowledge_Base/subscription_key_icons/commerce_icon.svg",
    alt: "Commerce Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="Supported products" defaultOpen="true" icon="cubes">
  <SupportedProducts marketing={true} marketingLevel="professional" cms={true} cmsLevel="starter" />
</Accordion>

A **child theme** is a copy of an original **parent theme**. You can edit the child theme without altering the parent theme. You can create child themes from default HubSpot themes, Asset Marketplace themes, and custom themes.

<Warning>
  **Please note:**

  Creating a child theme lets you customize its theme settings without impacting the parent theme settings. However, creating a child theme will not create clones of each of the theme's templates, modules, or files such as stylesheets and JavaScript. You'll need to manually clone these assets to create copies for the child theme.
</Warning>

## Create a child theme in the Design Manager

You can create a child theme in the Design Manager. You will be able to edit the child theme even if the original theme is not editable. The following files will be added to your child theme:

* `theme.json` - this will include an extends statement for linking to the parent theme.
* `child.css` and `child.js` - these are empty CSS and JS files. Code added to these files will only affect the child theme.
* Any files that contain the [`standard_header_includes` HubL variable](/cms/reference/hubl/variables#required-page-template-variables). This usually includes a "base" or "main" template file. You can [view an example of this on our boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates/layouts).

Learn how to create a child theme from an Asset Marketplace or default HubSpot theme in the [Knowledge Base](https://knowledge.hubspot.com/website-pages/use-themes#create-a-child-theme).

To create a child theme from a custom theme:

* In your HubSpot account, navigate to **Marketing > Files and Templates > Design Tools.**
* In the finder, click the **File** dropdown menu and select **New theme.**
* Click the **Theme Starting Point** dropdown menu and select **Blank Theme**.
* Enter a **name** in the *Theme Label* field.
* To change where the child theme will be saved, click **Change** in the *File location* section. Click a **folder**, then click **Select**.
* In the *theme.json* file, enter a **comma** at the end of line 5, then add a new line below line 5.
* On line 6, add an `extends` statement, using a value of the path of the parent theme.

```json theme={null}
"extends": "path/to/theme"
```

* By default, the child theme will inherit **fields.json** from the parent theme, so you do not need to create a separate **fields.json** for the child theme if you don't plan on updating it.

## Create a child theme with the CLI

You can create a child theme with the CLI. You must complete [the setup process for the CLI](/developer-tooling/local-development/hubspot-cli/install-the-cli) before creating a child theme. Your child theme will inherit the templates and files from the parent theme. You will be able to edit the new theme within the CLI and in the Design Manager.

* Create a new directory for your theme.

```shell theme={null}
mkdir cms-project
```

* In the new directory, create a copy of the **theme.json** file of the parent theme.

```shell theme={null}
cd cms-project
cp ~/src/cms-sprout-theme/src/theme.json
```

* In the copied *theme.json* file, add a comma to the end of line 5 and a new line below line 5 (or below the final line of the `responsive_breakpoints`, if they are present).
* Add an `extends` statement to line 6 (or 14, or the appropriate line for your theme), using a value of the path of the parent theme.

```json theme={null}
"extends": "@hubspot/barricade"
```

* By default, the child theme will inherit **fields.json** from the parent theme. Consequently, you don't need to create a separate **fields.json** for the child theme if you don't plan on updating it.
* Upload your new theme and files to your HubSpot account.

```shell theme={null}
hs upload cms-project cms-project
```

## Limitations

The total number of child themes you can have is based on your subscription:

* ***Marketing Hub** Professional* or ***CMS Hub** Professional*: five child themes
* ***Marketing Hub** Enterprise* or ***CMS Hub** Enterprise:* 10 child themes
* HubSpot's free tools and ***CMS Hub*** *Starter*: one 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.](https://knowledge.hubspot.com/website-pages/use-themes)
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](https://knowledge.hubspot.com/design-manager/swap-and-edit-your-blog-email-or-page-template#use-a-different-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.
7. **Can I create a child theme from a child theme?** Currently you cannot create a child theme from a child theme.