Creating a child theme
To create a child theme in the Design Manager:
- navigate to Marketing > Files and Templates > Design Tools
- In the left sidebar, click file and then choose New theme
- For the Theme Starting Point, choose Blank Theme
- Enter a name for your theme and click Create
- The theme.json file for the new theme will open. Edit the theme.json file and add a new line
- Add an extends statement, with @marketplace/Sprocket_Rocket/sr-theme as the value or @marketplace/Sprocket_Rocket/sr-theme-free for the free version
- Copy over the content of the original fields.json file from the parent theme
Next you'll want to create a CSS for and custom styles under /sr-child/css/custom-styles.css
- In the left sidebar, click file and then choose New folder name css
- Then in the left sidebar, click file and then choose New file chose the CSS + HubL file type and name it custom-styles, your folder structure should look like this.
- What assets are inherited from the parent theme?
All files are inherited from the parent theme unless they are overwritten in the child theme.
- How can I override a particular asset from the parent theme?
A file in the same relative path of a child theme will overwrite the equivalent file from the parent theme. For examples to overwrite
@marketplace/Sprocket_Rocket/sr-theme/css/custom-styles.css you can create /sr-child/css/custom-styles.css and make your edits to the new file. The new file will take effect instead of the inherited file.
- How can I edit an existing page to use a child theme instead of the parent theme?
You can replace your page template with the equivalent template from the new theme. To replace a page's template go to Settings > Advanced options and click the Use different template button. Select your child theme and then the equivalent template.
- Can I have more than 1 child theme?
Unfortunately at the moment HubSpot is limiting child themes to 1.