Theme customization overview - XMPieLab/uStore-NG GitHub Wiki

Theme customization

Each uStore NG store comes with a default theme, AquaBlue. You can customize the theme to suit your branding guidelines by replacing the logo, banner image, colors, fonts, and more.
Theme customization of one store does not affect the customization of another store, even if both share the same theme.

uStore NG HTML structure

uStore NG introduces a new store type - uStore NG - which comes with a new homepage, category page, header and footer. These pages are built using a new frontend technology based on React.js.
All other pages (such as cart, checkout) have a header and footer in the new frontend technology, and an iFrame that shows the main content in the old ASP.net technology. More pages will be converted to the new technology in the coming versions.

The HTML and CSS built with the React.js technology are controlled by the theme, whereas the CSS of the ASP.net content is controlled by the skin, as was the case in previous versions of uStore. The skin files are embedded within the theme. Read more.

To enable easy editing of the CSS of both the theme and the skin, uStore introduces the following:

  • CSS variables which affect UI elements throughout the uStore
  • CSS editor within the WYSIWYG theme editor

WYSIWYG theme editor

uStore NG stores come with a WYSIWYG editor that enables you to customize the theme's look & feel within minutes.
Unlike previous versions, you must not edit the CSS directly in uStore's file system. You can now do it all via the WYSIWYG theme editor.
Learn about the theme editor in the online help.

CSS variables

uStore NG provides a set of CSS variables that affect various UI elements throughout uStore.
These variables have the ability to change the font, logo, button color, corner radius, text color, and more.
Most of the CSS variables can be controlled by the dials and controls of the theme editor. Others can be set in the "Variables CSS" panel of the editor. For a full list of variables see Editing CSS variables.

CSS editor

You can easily edit the CSS from the theme editor.
Simply add the CSS classes you need in the "Custom CSS" panel of the editor.

CSS precedence

You've probably noticed that there are several levels of theme customization. In other words, multiple CSS rules can target the same HTML elements, and those CSS rules set some of the same CSS properties. So which CSS rules take precedence? The following is the CSS precedence. The higher level (1 is the highest) overrides the lower levels:

  1. Custom CSS
  2. Variables CSS
  3. Changes via the theme editor's dials and controls
  4. Theme's default CSS

Widgets

Widgets are pieces of code that can be added to specific locations in the theme, to allow the storefront to support new functionality (such as footer, promotional text or banner). You can either develop a widget or purchase it from XMPie Professional Services.
Learn about widgets in the online help.