Setting Up A HubSpot Child Theme

Setting Up A HubSpot Child Theme wo lr
Setting Up A HubSpot Child Theme For eZo Essentials

In recent years the HubSpot CMS has come of age and is now a great proposition when it comes to building websites.

In our humble opinion, the HubSpot CMS beats a lot of other CMS (including WordPress!) hands down for many reasons such as HubSpot’s dual approach of designing the CMS for both marketers and developers. The drag and drop interface is also an excellent way for users to build their website pages coupled with enterprise-level features such as hosting, security and maintenance (which cost a lot in both time and money on other CMS!). Oh, and did we mention support? Never mind the 5,000+ HubSpot Agency Partners waiting to help users if they ever get stuck!

So, as you can tell we’re pretty biased when it comes to HubSpot CMS and therefore felt it our duty to build a ground-breaking HubSpot CMS Theme to accompany every purchase of eZo. 

Step forward eZo Essentials!

eZo Essentials is a free theme and accompanies every installation of eZo.

eZo Essentials has a multitude of flexible features built-in leaving eZo Store Owners with two options:

1.  Use eZo Essentials To Build Only Their Product, Shop & Cart Pages; or

2.  Use eZo Essentials To Build Their Entire Website.

Great New Modules

With eZo Essentials you also get some great new modules including:

  • Mega Menu

    build complex menu structures which can even include products and CTAs
    Advanced Hero

    really set your website off with a cutting-edge image, video or slider on your home page
    Advanced Announcement Bar

    display messages at specific times along the top bar of your website
    Flexible Page Module

    use to build pretty much anything you need for your main page content such as text panels, icon grids or image galleries.
    Dynamic Content Module

    a brilliant module which pulls your Products from eZo dynamically and outputs them in a panel on your website page. Choose to display specific products or only featured products.
    Slide In CTA Pop Up

    make an big announcement or promote a fantastic product offer through Slide In CTAs

    These are only a few of the ground-breaking Modules which are bundled with your free copy of eZo Essentials!

Why You Need To Use A Child Theme


When the eZo Essentials theme is installed into your HubSpot portal, eZo will download all of the folders and files required for the theme to work.   A problem occurs, however, when an upgrade is required to the theme as this has the potential of over-writing much of the styling you have built into your website. 

When this happens the updated theme will over-write all of the original theme folders and files and effectively take your website styling back to day one. This is obviously not a great way to go about designing a website, so we are delighted that HubSpot supports Child Themes.

Website owners can now take their original eZo Essentials theme files and clone them into what is commonly known as a Child Theme.  The Child Theme will be linked to the original Parent files, however, should there be an update to the eZo Essentials theme this will take place to the parent files only and not over-write any of the website styling in the Child theme.  Store owners can continue to work with pages built with the child theme confident that they will continue to receive the benefits of any updates to the theme but not lose any styling they have applied to their website.

How To Create A Child Theme From eZo Essentials


For themes purchased through the Hubspot Asset Marketplace there is a simple process to follow.  This includes:

  1. In your HubSpot portal navigate to Marketing > Files and Templates > Design Tools
  2. In the lefthand sidebar, Right Click on the Marketplace theme (located in @marketplace folder)
  3. Choose Create Child Theme
  4. Enter a Name
  5. Choose the Location for the theme
  6. Click to Create Child Theme
  7. Click to Close

The new child theme and its contents will appear in the lefthand sidebar.

Unfortunately, in the majority of circumstances owing to the fact that eZo Essentials is added to a HubSpot CMS portal during the eZo installation process, there is a slightly different process to follow.

Step 1 

    1. In your HubSpot portal navigate to Marketing > Files and Templates > Design Tools
    2. In the lefthand sidebar click File
    3. Choose New Theme 
    4. Enter a Name - e.g. ‘Child of eZo’
    5. Click Create

Step 2

    1. The theme.json file will open
    2. Edit the theme.json file
    3. Add a comma to the end of line 5
    4. Add a new line below line 5
    5. Add “extends”: “ezo-essentials-theme” to this new line
    6. Click "Publish Changes" to the theme.json file

  2. Step 3 

    1. Click 'Back to All Files'
    2. Open 'eZo Essentials theme' folder
    3. Copy the contents of the fields.json file 
    4. Click 'Back to All Files'
    5. Open 'Child of eZo' theme folder
    6. Paste contents into the new (and blank) fields.json file
    7. Click to "Publish Changes" to the fields.json file
  3. Having completed this process the new Child Theme will now be linked to the original eZo Essentials theme files. Please Note: make sure any future changes (such as changes to the CSS of your theme) are made to the new Child theme and not the original parent files! This will protect your website going forward and mean that should a new version of the eZo Essentials theme be released it will not over-ride your designs.

We hope you have found this guide useful. If you require any further help, HubSpot has a useful blog on their own website which covers other scenarios such as creating a Child Theme using CLI tools in more detail.

If you have any questions, please do not hesitate to reach out to our customer support team.