SR App: Child Themes with Sprocket Rocket (Beta)

By using a child theme you can have 'multiple installations' of SR on the same portal while still allowing you to get all the latest updates and features from SR App.

sr-child-theme

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

Overwriting custom-styles.css

Typically you won't want the child theme to inherit your custom-styles.css, so you need to make a equivalent file in the child theme

  • 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.

Moving modules from the parent to the child

In order to use global modules in the child theme, you'll have to overwrite them in the child theme

  • First in the child theme. In the left sidebar, click file and then choose New folder name custom-modules
  • In the parent theme find the module you want to transfer, right click and choose Clone module
  • Then on the cloned module, right click and choose Move module and move to
    custom-modules folder in the child theme (See image below)

Note: This does mean you will not inherit any updates for that module
Bug: At the moment there is bug where the modules are NOT getting overwritten, so you may see the module twice 

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. To overwrite sr/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. For instance, replace the template SR Page (in the parent theme) with the template SR Page (in the child theme)
  4. What about global modules?
    Global module are also shared in a child theme, but so is the Global Content. In order to have a separate module in the child theme, clone the modules from the parent and move it into the child them. How To Move Modules
  5. How do I use the SR Builder with the child theme?
    Build the page as you normally would, once it is deployed to HubSpot follow the step under question #3 to swap your template
  6. Can I have more than 1 child theme?
    Unfortunately at the moment HubSpot is limiting child themes to 1.