TABLE OF CONTENTS

• Introduction 
  • Step 1: Copy the Default Theme
  • Step 2: Register New Child Theme with Znode
  • Step 3: Enable New Child Theme
  • Limitations and Constraints

Introduction 

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.

1. 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.
2. 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.
3. Keep the script files (Javascript) that are required or need to overwrite in the "Views/Themes/ChildTheme/Scripts" folder; remove all other files.
4. In Visual Studio, add the child theme to the project so that it appears in the IDE.
5. Make the following changes to confirm that it is possible to edit the theme and see the changes reflected in the UI.
   1. In the _variables.scss file, change the button primary color variable from orange to another color, and ‘Save’ the changes.
   2. The _variables.scss file, before updating:
      1. $btn-primary: #ff6f00
   3. The _variables.scss file, after updating:
      1. $btn-primary: #0000cc;

Note:

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.

1. 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.
2. For the next step, Znode must be running, so “Start” the solution in Visual Studio and open the Admin UI.
3. In the Admin UI, navigate to CMS > Site Themes.
4. Create a new theme, uncheck the ‘Is Parent Theme’ checkbox and select the Parent Theme (Example: B2B).
5. Upload the ZIP file of the ChildTheme when prompted and Save progress by using the "Save" button.
6. The new Child theme is now uploaded.
    

Notes:
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.

1. In the Admin UI, go to CMS > Store Experience.
2. Select your store from the list of stores
3. 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.
4. Publish the store by clicking the publish icon next to the store on the CMS > Store Experience page.
5. Load the WebStore in a browser tab to verify everything is working.

Limitations and Constraints

1. The view files(.cshtml) from the “Views" and "DynamicGrid" folders inherit from the Parent theme if they are not overwritten in a Child theme.
2. The script files(.js) from the “Scripts/lib" folder inherit from the Parent theme if they are not overwritten in a Child theme.
3. 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.
4. 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