Create a Child Theme

Before you customize blox for your site, clone the parent theme into a child theme. The child theme is where your code-level changes live - the parent stays untouched so it can keep receiving updates without overwriting your work.

Why a child theme ↓ Jump to steps ↓

Why a child theme?

A child theme inherits everything from the blox parent theme - modules, templates, sections, global styles - and lets you override or extend specific pieces without modifying the parent files. When a new version of blox ships, you pull the update into the parent and your child theme keeps its overrides intact.

Editing the parent theme directly is the fast path to losing work the next time you update. Always work in a child theme for production sites.

Step-by-step

1. Open the Design Manager

HubSpot Marketing → Files and Templates → Design Tools

Sign into your HubSpot portal and open the Design Manager. This is where every theme, template, module, and asset in your portal lives.

2. Locate the blox parent theme

Folder @marketplace / Vested Marketing / blox

In the Design Manager file tree, expand the @marketplace folder, then open the Vested Marketing folder. Inside you will see the blox theme folder. That is the parent.

3. Right-click the blox folder and choose "Clone child theme"

Context menu

Right-click on the blox theme folder and pick the "Clone as child theme" option from the menu HubSpot shows. This is the only correct way to create a child - copying files manually breaks inheritance.

4. Name your child theme

Naming convention blox x [Company Name]

Use the convention blox x [Company Name] (for example, blox x Acme Corp). The "blox x" prefix makes it easy to spot blox-derived themes in the Design Manager, and the company name keeps things clear when an agency manages several portals.

5. Confirm and create

Action

Click the "Create child theme" button. HubSpot generates a new folder at the top of your file tree containing the child theme manifest and an empty theme.json. You are now ready to start customizing.

What to clone into the child theme

The child theme arrives almost empty on purpose. Only clone in the files you actually need to modify at the code level. If you never touch a file, leave it in the parent so it keeps inheriting updates.

Modules you need to extend with new fields, layouts, or HubL logic.
Templates where you need to change the page structure or wrapper.
theme.json if you need to override global theme settings (colors, fonts, default spacing).
CSS partials if you are introducing brand styles that should override blox defaults.

Settings you change in the Theme Editor UI (colors, typography, etc.) do not require cloning anything - they save to the child theme automatically once it is selected.

Managing multiple sites

If a single HubSpot portal hosts multiple websites, create one child theme per site. For each child theme that needs its own logo, nav, or footer copy, clone the global Header and Footer modules into that child so each site can be branded independently without affecting the others.

Using the child theme on new pages

When you create a new website page, landing page, or blog template in HubSpot, pick your child theme (for example, "blox x Acme Corp") from the theme selector instead of the parent blox theme. The page inherits the child theme's overrides plus everything still living in the parent.

Pages already built on the parent theme keep working. To migrate them onto the child, open each page settings and change the theme selector to the child theme.