TABLE OF CONTENTS

• Introduction
• Creating a Custom Theme
  • Step 1: Copy the Default Theme
  • Step 2: Register New Theme with Znode
  • Step 3: Enable New Custom Theme
  • Step 4: Edit the New Theme
  • Limitations and Constraints

Introduction

Znode comes OOTB with our B2B Hardware Theme. 

Znode offers a pre-built theme and templates for front-end stores. The theme is provided through the SDK and calls the APIs surrounding Znodes core. . This theme will always have new features, major performance enhancements, and bug fixes.

The Znode WebStore UI is rendered by MCV Razor view templates. All templates and other content files (fonts, styles, etc.) are contained in a Znode 'theme'. These themes can be easily plugged in and switched at any time. This theme is found in Znode.Engine.WebStore/Views/Themes/B2B and the DB is Znode_Multifront_975_B2B.sql.

Creating a Custom Theme

Znode provides a simple way to create child themes inherited from a master theme(parent). The child theme needs to maintain site-specific changes. Any theme element that is global only needs to be changed in one parent there. You can think of our current theme as the B2B hardware theme and it is meant to customize to help get you quickly started.

Step 1: Copy the Default Theme

To create a new custom theme, use the default theme (i.e. B2B theme) as a starting point.

1. Make a copy of the default theme (i.e. B2B theme) in the 'Views/Themes' folder. Name the copied folder to the desired custom theme name. The name NewTheme 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 custom 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;
6. Important: Commit the new theme to source control. Immediately committing to source control ensures a full history of theme customizations is captured in source control.

Step 2: Register New 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 NewTheme folder. Note that the “Content”, “Fonts”, ”Images” “DynamicGrid”, 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 (http://localhost:6766 by default).
3. In the Admin UI, go 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 custom theme is now uploaded.
   Note - 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 Custom 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 NewTheme 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 globe icon next to the store on the CMS > Store Experience page. This moves the state from the SQL database to the MongoDB database, which means the new theme will become active in the WebStore.
5. Load the WebStore (http://localhost:3288 by default) in a browser tab to verify everything is working.

Step 4: Edit the New Theme

Now that the theme is successfully applied to the store, it is time to confirm that it's possible to edit the theme and see the changes reflected in the UI.

1. In the _base.scss file, change the primary color variable from red to another color.
2. Build the solution and run it.
3. Refresh the WebStore in the browser and verify the color change has taken effect.

The _base.scss file, before updating:

$base-color-primary:#cc0000;

$base-color-primary:#0000cc;