There are times where we need a custom feature in a module that is not available out of the box. In this article, we’ll go over how to customize an Atlas module’s code.
Understanding Child Theme Inheritance
A child theme is a copy of an original parent theme. You can edit the child theme without altering the parent theme. A child theme does not include all of its parent’s files; it initially includes only structural files and inherits all other files from its parent theme. To override the inheritance of these files, we need to either clone those files from the parent to the child theme or create a new file in the child theme with the same name and directory as the parent theme.
Cloning a Module From a Parent Theme to a Child Theme
In this example, we will clone the FAQ module from Atlas Pro to an Atlas Pro child theme and change the entry’s headers from H3 to H4.
- In your HubSpot account, use the navigation bar to access Content ⇒ Design Manager.
- If you are not using a child theme, create one by following these steps.
- Locate your parent’s theme directory by navigating to @maketplace ⇒ kalungi_com ⇒ Atlas_Pro_SaaS_Website_Theme. (Your parent theme’s directory might change depending on your product).
- Once in your parent theme’s directory, locate the FAQ module in the modules directory.
- Right-click on the module, and select Clone to child theme.
- Select your child theme and click Okay.
- If you navigate to your child theme, you will see a new modules directory with a cloned version of the FAQ module in it.
- Click on the FAQ module, and locate the module.html (HTML + HubL) code box.
- On line 8, change the opening and closing H3 tags to H4 tags.
- Click on Publish changes at the top right of your screen.
- Your new version of the module is now available for all contents that use templates from your child theme.
