How to boost your website with HubSpot themes

HubSpot’s CMS is a powerful hub for designing and organizing your web content. For those of us non-developers, though, the idea of learning this backend system may feel overwhelming at first. True story: I didn’t know a thing about web design when I first got started, so you’re in good company. :) Stick with me for a few minutes, and you’ll feel confident in your ability to build a kick-ass HubSpot website.

We’ll go over:

• Why you’d be smart to use a theme
• Child themes: the key to customization and ease
• How to keep your site updated

Ready to take your site-building skills to a new level? Let’s do it.  

Why you'd be smart to use a theme

Themes make designing websites in HubSpot so darn easy. These collections of templates (like web, blog, and landing pages), modules (like text, video, and images), and global design features give your site that consistent brand look and feel.

The HubSpot drag and drop editor is also a delight to use, making the user experience super smooth.

Plus, HubSpot makes site updates seamless with themes, but there are some important caveats (keep reading).

Child themes: the key to customization and ease

What’s a child theme?

It used to be that you had to choose between getting theme updates or customizing your site at the code level. But now, it's possible to do both. Thanks, child themes!  

IMPORTANT: child themes are different from cloned themes. Cloned themes are customizable but won’t get the awesome theme updates when new versions are released. Child themes give you the best of both worlds. :)

Even if you don’t have any custom features planned at the moment, it’s wise to start with a child theme in the event you change your mind. Child themes let you:

• Make code-level changes to modules or templates
• Create unique versions of global elements (ie., header or footer)
• Add new custom modules or templates
  
  

How do I create a child theme?

So, how can you create a child theme? It’s simpler than you’d think.  

First, choose an original (parent) theme from the HubSpot Template Marketplace. We’ll be using our CLEAN theme as an example here, so if that’s what you’re working with, sweet! Otherwise, you can still follow along, but it may look different on your end.

After choosing your theme, go to your design tools (under Marketing → Files and Templates).

Look to the menu on the left, find the CLEAN-6-1-theme folder under Helpful Hero, and right-click. You’ll see an option to create a child theme. Hit it!

Name your child theme (like CLEAN X Your Company). Don’t worry about the CSS or JavaScript under Advanced options (unless you’re a developer and want to customize specific files without affecting other parts of the site).

Click create child theme. It’ll buffer for 10 - 15 seconds, and then BOOM! You’ve got a child theme.

How do I create new pages with my child theme?

But hold on, now what? How do you actually create your site pages?

Go to Marketing → Website → Website Pages and hit create new website page. You’ll be prompted to select a theme. Look for the CLEAN X Your Company child theme you just created and click it.

Next, you’ll see some choices for the page template you want to use. What you choose here is totally up to you and depends on the type of page you want to build. Pick a template, any template. Now you can create a new page in your child theme! Have fun with that drag and drop editor. ;)

How do I customize my child theme?

If you’ve decided to implement any custom features, this section is for you.

For the video version, check this out.

Step 1: Pick a module to customize.

First, decide which module you need to customize.  Let's say you've decided to add some features to your Hero Banner, for example. 

Step 2: Clone the original theme.

Head back to Marketing → Files and Templates → Design Tools and locate the original theme files.  Right-click on the original theme, and create a cloned version.

You may find it helpful to name it something like transfer only since you’ll need it temporarily to move modules or files.

Step 3: Take note of the file structure.

Next, notice the file structure in your cloned theme.  In this case, the module you want to edit (Hero Banner) is nested under the modules folder.

Pro tip: don't forget to check the CSS folder!  Chances are, the module you want to customize is linked to a CSS stylesheet.  In this example, you'll find the hero-banner.css file under CSS → modules.

Step 4: Recreate the file structure in your child theme.

Next, find your child theme files.  You'll see just the fields.json and theme.json files, for starters.

Now, add folders to match the folder structure of the cloned transfer theme. 

In this case, we'll want to add a modules folder and a CSS folder with a nested modules subfolder so that it looks like this:

Step 5: Move your files.

Now that your file structure is ready to go, head back to your cloned transfer theme, right-click on the module you want to edit, and hit Move module.

Select the destination folder in your child theme.

Do the same thing for your linked CSS file.

Now you should see both files sitting happily in their new child theme home. 

Step 6: Check for linked files.

Before you edit your module, double-check the linked files in the sidebar on the right. If you see anything in here that you haven't already transferred, do that now.

Pro tip: only pull in CLEAN modules, templates, or files that you ABSOLUTELY NEED to customize into your child theme since customized files won’t be overwritten by theme updates. More on that below.

How to keep your site updated

Here are some crucial things to know before installing an update (especially if you’re using a child theme):

• The update WILL only alter the original PARENT theme files and pass-through to any CHILD themes you have set up.
• The update WILL NOT overwrite any modified module, files, etc., in your CHILD theme (see step above). That’s why you should only bring over files you need to customize to avoid missing out on theme updates.
• The update WILL NOT alter any CLONED versions of the theme in your account.

Now that we’ve got that out of the way, how will you know when it’s time to do an update?

When to update your theme

First, check to see which version of CLEAN you’re using. Go to Marketing > Files and Templates > Design Tools and find your @marketplace folder.

Click either your cloned or original theme files, and open the theme.json file. The version number will be on line 6.

Next, check the release notes to see which version of CLEAN is the latest. As of the date of this article, V.36 is the latest.  

Does the version number from the release notes match the number from line 6 in your theme.json file? You’re good! Otherwise, it’s time for an update.

Pro tip: if it’s time for an update, double-check the release notes to see if there are any additional steps you need to take.

How to update your theme

Here’s how to take advantage of awesome theme updates.

Go to your Content Settings and click the Marketplace & Downloads link in the sidebar. You'll see the list of your marketplace assets and a button that says Install update. Click it, and enjoy your updated theme!

You have so got this!

You’re about to have a functional, flexible site that’s easy to edit, looks awesome, and converts. Just follow the steps outlined above, and you’ll be the hero of your company.