How to manage multi brand themes

[JLeNai]

We have 2 brands on one hubspot portal. So far, we used the theme Elevate to build our destination pages for Brand A.
Now that we have a multi brand account, we would like to use the same Elevate theme but applied to the colors and identiy of our second Brand B.
I can't find how to do that, and have Elevate Brand A template vs Elevate Brand B template. Moreover, even if I would find another theme and template that would suits the Brand B, we can only have 1 active theme for the account, forcing us to switch default theme every time we want to create a new page, which could create high confusion. 

[Anton · Accepted solution]

Hey @JLeNai, 

I've done this setup in the past:

- Parent theme (like Elevate)

- - Child-Theme A (for brand A)

- - Child-Theme B (for brand B)

Clone all desired assets to the child theme so they're seperated from each other but still connected to the parent theme. 
To have something like different colors per brand, clone the fields.json from the parent theme to each child theme and edit them as you would do it with any other theme in the settings.

Settings -> Content -> Themes -> THEME_NAME -> edit theme 

Also, HubSpot is designed this way - you have to choose a theme every time you create a new page. I know it's confusing, but I haven't heard of a feature that would ask you for what brand you're creating a page and based on this would use the linked theme from the brand settings. (Might be a good idea for the ideas section 🙂 ) 

p.s.:

If you don't have a developer who's familiar with CMS React and the "Project themes"(not an official name; I just call them so), you might want to check for alternatives(Marketplace, custom themes) as Elevate is the first CMS React theme and React themes are developed only locally (not available in the Design Manager as other themes). Therefore you won't be able to see/modify it via Design Manager.

Hope this helps.

best, 

Anton

[JLeNai]

Hi Anton, 
Thank you for your clear answer! So if creating a child theme in the design manager isn't possible for the Elevate theme, am I right to advice my Developper to follow this page and install the hubspot CLI? https://developers.hubspot.com/docs/developer-tooling/local-development/hubspot-cli/install-the-cli

[Anton · Accepted solution]

Hey @JLeNai, 

yes., he has to go through the whole local-environment setup, fetch elevate, create child-themes and deploy them to your portal.

My recommendation (if he hasn't already):
Create a free app-developer account on developers.hubspot.com, create a app-test account in this app-dev account (it's a CMS sandbox), deploy and develop everything in this account, once you're happy, push everything to your live portal and once this is done, you can start creating pages with each child-theme/brand theme

p.s.: GitHub is not necessary but might be benefitial

best, 

Anton

[Anton · Accepted solution]

Hey @JLeNai, 

I've done this setup in the past:

- Parent theme (like Elevate)

- - Child-Theme A (for brand A)

- - Child-Theme B (for brand B)

Clone all desired assets to the child theme so they're seperated from each other but still connected to the parent theme. 
To have something like different colors per brand, clone the fields.json from the parent theme to each child theme and edit them as you would do it with any other theme in the settings.

Settings -> Content -> Themes -> THEME_NAME -> edit theme 

Also, HubSpot is designed this way - you have to choose a theme every time you create a new page. I know it's confusing, but I haven't heard of a feature that would ask you for what brand you're creating a page and based on this would use the linked theme from the brand settings. (Might be a good idea for the ideas section 🙂 ) 

p.s.:

If you don't have a developer who's familiar with CMS React and the "Project themes"(not an official name; I just call them so), you might want to check for alternatives(Marketplace, custom themes) as Elevate is the first CMS React theme and React themes are developed only locally (not available in the Design Manager as other themes). Therefore you won't be able to see/modify it via Design Manager.

Hope this helps.

best, 

Anton