Creating a Custom Theme

TABLE OF CONTENTS

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.

Creating a Custom Theme

The following steps walk through the process of creating a new custom theme.

Strategic need

A simple way to manage these changes across multiple stores.

Fast Facts

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. 

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. 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.
  3. In Visual Studio, add the custom theme to the project so that it appears in the IDE.

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”, “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, uploading the ZIP file when prompted.

Step 3: Enable New 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;

The _base.scss file, after updating:

$base-color-primary:#0000cc;

Note 

Znode v.9.7.3 supports the Prepros compiler and znode v.9.7.4 supports Web Compiler.

In znode v.9.7.3, there are out-of-date references in the compilerconfig.json

So, for using the Web compiler in znode v.9.7.3, remove all references other than the B2B theme and follow the instructions mentioned in Installing Web Compiler

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.