Site Themes

From Znode Knowledge Base
Jump to: navigation, search
Submit a Support Ticket
CMS > Site Themes

Cms--site themes.png

Multi front lets you endlessly customize the look and feel of your Webstore's front-end by giving you code-level access to the Site Themes, Widgets, and CSS.

Site Theme Template Multifront provides a Site Theme, named "Default", which contains the structure, formatting, appearance, and behavior of your Webstore out-of-the-box. This can be downloaded locally and modified offline, based your requirements. When you're ready, this modified Site Theme gets uploaded to Multifront and can be associated with your Webstore(s).

CSS The "Default" Site Theme contains a folder, called "Contents", which contains .css files. These can be downloaded locally and modified offline, based on your requirements. When you're ready, the modified CSS gets associated with a Site Theme. After the style sheet is associated with a theme, the modified CSS can be associated with a Store. Custom style sheets are uploaded using the "CSS" tab, located by using the "Manage" action on a Site Theme. Administrators can associate several .css files with a single Site Theme-- so go ahead and knock yourself out.

Widgets (a.k.a Control Elements) are reusable blocks of code that can be configured without the help of a developer to serve various functions... but mainly to create Content for Pages. In Multifront, Widgets are a part of an out-of-box Webstore's Display Settings. These widgets can meet most requirements without any additional modifications. But, as part of the "Default" Site Theme base template, Widgets can be customized-- at the code level-- to meet any custom requirements.

Core Site Theme Pages

When creating a Site Theme, there are a few primary, "must have", "Core" pages that will always be a part of a Site Theme.

  • Home Page
  • Category Page
  • Search Page
  • Product Page
  • Brand Page

Honorable Mention Although technically not pages, these sections are also "Core" because they are featured on every Content Page.

  • Layout
  • Header Section
  • Footer Section

Theme Details

Detail Description
Theme Name Internal reference name for theme
File Name Upload the valid Zip file which contain multiple folders associated in it.

Download Site Theme

CMS > Site Themes > "Download" action on Default Site Theme
The "Default" .zip folder contains the .cshtml files and folder structure used to create your custom theme.

The "Default" Theme moonlights as the base template you will need to develop your own custom look and feel

  1. Navigate to the Site Theme section of CMS
  2. Use the "Download" action on the "Default" theme. This download is your base template as a .zip folder.
  3. Once the "Default" theme is downloaded, unzip default theme folder.
  4. The download can now be customized. Check out Theme Development for more insights on what is in the .zip.


Note: Website Logo, Display Settings, and the Product Page tab are not included in the Site Theme because they are Store-based Display Settings.

Add Site Theme

CMS > Site Themes > "Add New" button

Cms--add site theme.png

  1. Complete Theme Details.
  2. Use the "Browse" button to locate and select the modified Site Theme
  3. Save progress using "Save" button. The page will reload with action confirmation.
  4. Site Theme is now uploaded


Note: Multifront will navigate to the "CSS" tab after uploading a Site Theme because Style Sheets are required to be uploaded separately from Themes.

Associate CSS to Site Theme

CMS > Site Themes > "Manage" action > CSS Tab > "Add new" button

Cms--manage css.png Multiple .css files can be associated with a single Site Theme for Administrators to choose from.

  1. Use the "Browse" button to locate CSS from local storage.
  2. Save progress using the "Save" button. The page will reload with action confirmation.
  3. CSS is now associated with Site Theme

Associate Site Theme to Store

 Stores and Reps > Stores > "Manage" action > "General" tab 

Note: Site Themes must be uploaded to Multifront before they can be associated with a Store.

  1. Use the "Theme" drop-down to a select an existing Site Theme.
  2. Use the "CSS" drop-down to select a CSS option associated with the Site Theme.
  3. Save progress using the "Save" button.

Add Theme

CMS > Site Themes > "Add New" button

Cms--adding site theme.png

  1. Complete Theme Details.
  2. Use the "Browse" button to select CSS files
  3. Save progress using "Save" button

Edit Theme

CMS > Site Themes > "Edit" action
  1. Use "Download" action on CSS file to be edited
  2. Open .zip file and make appropriate edits. Then, save.
  3. Upload updated file using "Add" button
    • Complete Theme Details.
    • Use the "Browse" button to select CSS files
    • Save progress using "Save" button
  4. Delete original CSS file

Related Links