I’ve worked on several website development projects on the HubSpot CMS. While working to build new modules, I have added a lot of flexibility in terms of what content editors and marketers can do with it. That gave me a good idea of the different types of features that users commonly need, and I wanted to make that kind of flexibility available for the HubSpot community. And that is why I decided to make a theme that brings together good design, just the right amount of features, and gives marketers the autonomy to make quick and easy changes to how everything looks, without having to bother about the code.

What it does

Starter is the perfect theme for people using a HubSpot theme for the first time. It has everything that a first time user needs, but not so much as to completely confuse them. The theme is designed to fit into diverse use cases with a wide range of modules available. You can also easily change up the look and feel of your website to create the impact you want, with a series of editing options both at the site and at the page level. Download the theme and you will be all set to spin up a website that looks good, feels good, and get's you the conversions you want.

How I built it

The process of building this theme was exciting, but more importantly collaborative. We started off with some brainstorming sessions to get to a basic set of requirements that this theme would have. Because we are a marketing agency, we had experience across several web design projects, and also in-house experience of what we want a HubSpot theme to be able to do.

Once the requirements were set, we moved to design. Working closely with a designer, we created a theme that was clean and caters to a wide range to businesses/use cases. The design process also helped identify some new features and editing abilities that a typical user might want.

Once I had a fair idea of what I was working to build, it was time to start coding. But not before I had spent time going through the documentation of how an entire theme is built on HubSpot. There were certain new skills and methods that I had to learn first, in order for it to be a good HubSpot theme, giving users the same level of intuitive and easy experience that they are used to with HubSpot.

Challenges I ran into

As I mentioned, there were a few new skills that I had to learn, and most of these came up while I was in the middle of building some feature on another. I would come up against a wall and then realise that this needs to be done in a different way, and then go ahead and learn about it. Some the key challenges were around:

  • Adding modules into the drag and drop area so users can easily pick and use it on their pages. This was something I hadn’t done before and had to spend some time understanding exactly how to make that happen in HubSpot.
  • The second challenge was to add the feature for global modules to override individual page level modules. Ensuring this involved significant manual effort in the code and also required extreme attention to detail. It took me quite some time to do that well.

Accomplishments that I'm proud of

I am very happy about the fact that I was able to pick up this project and actually take it to completion. Over the past months, I have been involved in several client projects, and needed to be extremely disciplined in order to consistently carve out the necessary time to work on the theme. The fact that I was able to balance things and successfully finish my first HubSpot theme is definitely an accomplishment that I am proud of.

What I learned

Some of the key learnings from this project have been:

  • The ability to think things through and plan and structure an entire project in my head. The entire process of understanding what needs to get done, how to do it, when to do it, and how to keep up the pace, that’s been a huge learning.
  • Technically speaking, I learned working on the HubSpot CLI
  • Also understood HubSpot coding standards in greater detail, working with Hubble, and how the HubSpot modules work at the backend.
  • Another key learning was working with Node.js

What's next for Test

Next up, I would like to try out the following with this theme:

  • Using SASS for the stylesheets
  • Using minified CSS/JS to improve load times
  • Leverage React and HubDB to create complex filters, pagination, and other capabilities in the theme.

Built With

Share this project: