1. Knowledge Base
  2. Sprocket Rocket Theme
  3. Getting Started with Sprocket Rocket Theme

SR Theme: How to create a Child Theme (Beta)

By creating a child theme of the Marketplace theme, You can now create one-off changes, custom CSS, JavaScript, and/or modules, while still being able to receive updates through the Marketplace.

sr-child-theme-marketplace

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
"extends": "@marketplace/Sprocket_Rocket/sr-theme"
  • Copy over the content of the original fields.json file from the parent theme

Creating custom-styles.css

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.

FAQ

  1. What assets are inherited from the parent theme?
    All files are inherited from the parent theme unless they are overwritten in the child theme.
  2. 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.
  3. 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.
  4. Can I have more than 1 child theme?
    Unfortunately at the moment HubSpot is limiting child themes to 1.