-
Notifications
You must be signed in to change notification settings - Fork 3
Theme customization overview
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 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
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.
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.
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.
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:
- Custom CSS
- Variables CSS
- Changes via the theme editor's dials and controls
- Theme's default CSS
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.
uStore NG Themes
uStore NG Extensibility
Theme customization overview
Editing CSS variables
Editing the CSS
Migration from Legacy to NG
Theme development overview
Getting started
Theme file structure
Publishing the theme
Upgrading a Custom Theme
Editing HTML content
Adding a new page
Adding assets
Adding a component
Customizing a skin
Modifying CSS variables
Editing fonts
Adding JavaScript
uStore library
Working with REST API
Accessing uStore data
Managing custom state
Working with localizations
General services
Adding an external package
Customizing the Theme Editor
Theme tips and tricks
uStoreProvider Reference
Tax Webhook
Order Approval Webhook
Manufacturer Webhook
Widgets
Cart Export Webhook
Input Control Development Guide
Using uStore as a web component