Posted on November 1, 2022

How to upload a theme to your HubSpot CMS Portal

So you have the folder or zip for a theme that you like.

Wondering how to install?


Let me start by telling you what is a theme and what a good theme should have. A theme is a portable and contained collection of assets created by developers and they are designed in a way to enable the user with a flexible content editing experience. A good theme should be extremely flexible to meet the needs of your business.

HubSpot encourages all external themes created by partners or other developers to follow a certain standard hierarchy and file names. This makes the maintenance of the theme easier.

HubSpot ThemeA theme is a single directory of all the files which includes HTML, CSS, Javascript files or any other custom modules or scripts which complete a theme. The 2 files mandatory to build a theme are theme.json and fields.json. A typical theme folder hierarchy looks like this:

 

Theme file hierarchy

The other major item that defines a good theme are the theme modules. The theme modules should be designed & created specifically for that theme only. The modules should be flexible and easily editable when added on page.

Follow these steps below:

You will see the downloaded theme as a zip file.

In your portal, go to “Settings > Website > Themes”.

HubSpot Settings


The URL will look like this:

https://app.hubspot.com/settings/<your_portal_id>/website/themes


This page will display all current themes and will look like the screenshot below
Selecting theme in HubSpot

Click “Upload Theme” link in top right part of the page and upload your theme.

Uploading theme in HubSpot

It may take a few minutes for the theme to appear in your Design Tools area of the portal.and that’s it!

You can start using your theme.

After successful update, you can select this newly added theme as the default theme for new pages by going to “Marketing > Website > Website Pages > Create > Website Page”

Create page in HubSpot

Create Website page in HubSpot

Add page name while creating Website page in HubSpot

Here you will see a field called “Theme” with current selected theme.

Default theme in Hubspot while creating pages

Click on “Change Theme” to see the list of all installed themes and choose the latest one.

Changing theme while creating pages in HubSpot

 

There is another option if you are comfortable with HubSpot CLI. You can unzip the theme folder and use the hs upload command to upload the theme in following format:

hs upload --account=<name> <src> <dest>

 

Leave a reply

Our Recent Blogs

Vikram Singh
Vikram Singh Vikram Singh | Director, The WebPlant Pvt ltd
Posted on November 6, 2022

Using Conditional Directives in CSS for Performance Boost

Deepti Mittal
Deepti Mittal Working with HubSpot since 2011 and have onboarded thousands of customers on HubSpot platform.
Posted on November 4, 2022

Feeling stuck with a purchased HubSpot theme?

Deepti Mittal
Deepti Mittal Working with HubSpot since 2011 and have onboarded thousands of customers on HubSpot platform.
Posted on November 1, 2022

How to upload a theme to your HubSpot CMS Portal

Deepti Mittal
Deepti Mittal Working with HubSpot since 2011 and have onboarded thousands of customers on HubSpot platform.
Posted on October 31, 2022

HubSpot CMS Tiers - which one is best for me

Deepti Mittal
Deepti Mittal Working with HubSpot since 2011 and have onboarded thousands of customers on HubSpot platform.
Posted on October 27, 2022

What makes a good HubSpot CMS Theme

Vikram Singh
Vikram Singh Vikram Singh | Director, The WebPlant Pvt ltd
Posted on October 18, 2022

How we ensured success with a mobile first approach for a web application launch

Admin
Admin
Posted on September 13, 2022

Unlock your potential with Automation