TABLE OF CONTENTS
Prerequisite: In the "Views/Themes" folder, at least one Parent theme must be present.
In Znode, using a child theme is a simple way to create and manage store-specific differences without having to maintain two entirely separate themes. A child theme gives you the ability to inherit parts of a theme from a parent theme. The parent theme includes all the template files and assets required for the storefront to work. The parent theme is where the common pages/views across all stores would be maintained and only the unique pages/view would be included in the child theme.
The following steps walk through the process of creating a new child theme using the default B2B theme as the parent.
Step 1: Copy the Default Theme
To create a new child theme, use the default theme (e.g., B2B theme) as a starting point.
- Make a copy of the default theme (e.g., B2B theme) in the 'Views/Themes' folder. Name the copied folder to the desired child theme name. The name ChildTheme is used as an example throughout these instructions.
- Keep the view files that are required or need to overwrite in the "Views/Themes/ChildTheme/Views" and "Views/Themes/ChildTheme/DynamicGrid" folders; remove all other files.
- In Visual Studio, add the child theme to the project so that it appears in the IDE.
- Make the following changes to confirm that it is possible to edit the theme and see the changes reflected in the UI.
- In the _variables.scss file, change the button primary color variable from orange to another color, and ‘Save’ the changes.
- The _variables.scss file, before updating:
- $btn-primary: #ff6f00
- The _variables.scss file, after updating:
- $btn-primary: #0000cc;
Commit the new theme to source control. Immediately committing to source control ensures a complete history of the theme is captured.
Step 2: Register New Child Theme with Znode
Before enabling the new theme, it must be "registered" in Znode's Admin UI.
- Create a ZIP file of the contents of the child theme folder. Note that the “Content”, “Fonts”, ”Images” etc. folders need to be at the root of the ZIP file.
- For the next step, Znode must be running, so “Start” the solution in Visual Studio and open the Admin UI.
- In the Admin UI, navigate to CMS > Site Themes.
- Create a new theme, uncheck the ‘Is Parent Theme’ checkbox and select the Parent Theme (Example: B2B).
- Upload the ZIP file of the ChildTheme when prompted and Save progress by using the "Save" button.
- The new Child theme is now uploaded.
In a load-balanced environment, only child theme “registration” can be done using the above-mentioned screen and the theme file package upload needs to be handled by using a build deployment process in order for the files to be uploaded/deployed to all environments.
Step 3: Enable New Child Theme
Once the theme is "registered" in the Admin UI, it can be enabled for a store.
- In the Admin UI, go to CMS > Store Experience.
- Select your store from the list of stores
- On the General Settings tab, for Theme choose ChildTheme to be the theme associated with the store, and choose the first site.css option to be the active CSS file.
- Publish the store by clicking the publish icon next to the store on the CMS > Store Experience page.
- Load the WebStore in a browser tab to verify everything is working.
Limitations and Constraints
- The view files(.cshtml) from the “Views" and "DynamicGrid" folders inherit from the Parent theme if they are not overwritten in a Child theme.
- The script files(.js) from the “Scripts/lib" folder inherit from the Parent theme if they are not overwritten in a Child theme.
- The files in the "Content", "Fonts", and "Images" folders do not inherit from the parent. They must be copied from the parent or created in the Child theme.
- Any new or customized view files created in a ChildTheme will only exist in the child theme. If the ChildTheme is deleted then these custom views will also be deleted