1 Go to and use the tool on the left to customize your theme, even before purchasing:

Act2 Customization - Step 1

Navigate between the available styles using the arrows:

Act2 Customization - Step 1 - Navigation

Reset a style to its default settings by clicking the style name and the reset button:

Act2 Customization - Step 1 - Reset

2 When you're ready with your design copy the customization code:

Act2 Customization - Step 2

3 Go to your HubSpot portal and replace the code at the top of your Act21.css file with the one you just copied:

Access HubSpot Design Tools

Act21 CSS Stylesheet

Act21 Customization Code

Publish CSS changes in HubSpot

4 Important step on new portals:

HubSpot no longer enables jQuery JS library by default in new portals, and Act2.1 requires jQuery in <head> for many components, features and functionality. So to avoid any JS errors and problems with your theme, please follow these steps to enable jQuery in your new portal:

Go to Settings > Website > Pages > Templates (tab), scroll down and check the option to include jQuery, then save your changes:

How to Enable jQuery in HubSpot

Also, we found a small glitch with this HubSpot UI on a few portals before, so an extra step may be needed to make sure jQuery is loaded from the <head> instead of footer:

After you saved your changes, please also check the Load HubSpot's included jQuery library from your footer option, then click Save again:

Load jQuery from footer on HubSpot CMS

And finally uncheck it and save again:

Load jQuery from head on HubSpot CMS

Everything should work as expected now. If it's still not working, please keep in mind HubSpot has a cache, so it may take a bit for the changes to take effect.