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.
The remaining pages 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 are converted to the new technology with each version.

Pages still served through the iFrame:

OrderFinalStep.aspx, CheckoutComplete.aspx, CheckoutFinal.aspx, CheckoutPaymentSubmission.aspx, Clearing/UnknownOrder.aspx, Customization.aspx, CustomMain.aspx, EmptyPage.aspx, FileSubmission/FileSubmission.aspx, OrderApprovalList.aspx, OrderDetails.aspx, ProductUnavailable.aspx, Recipient.aspx, SplitShipping/Addresses.aspx, SplitShipping/Items.aspx, uEditCustomization.aspx

ProductProperties.aspx is also embedded, for the items of a kit product, and login.aspx / logout.aspx handle the sign-in round trip.

Already converted to the new technology, and no longer served in an iFrame: the cart, order history, product details and recipient lists pages.

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.

Accessibility

The AquaBlue theme is built to be used with a keyboard and with assistive technology. In the pages built with the new frontend technology (see uStore NG HTML structure above):

  • Keyboard. All functions can be operated with a keyboard. Tab and Shift+Tab move between links, buttons and fields, and Enter or Space activates the focused one. The focused element always shows a visible focus indicator.
  • Screen readers. Pages have landmark regions (banner, navigation, main and footer), headings, and labelled fields and buttons, so screen reader users can move by landmark or by heading. Status and error messages, such as cart errors, are announced automatically.
  • Zoom and small screens. Text can be enlarged to 200 percent with browser zoom, and the layout adapts down to a width of 320 CSS pixels, in portrait or landscape. Text spacing can be increased without losing content.
  • Nothing to turn on. The storefront has no accessibility settings of its own. It uses the accessibility features of the shopper's browser and operating system.

Customizing a theme can reduce its accessibility. The theme editor does not check color contrast, so after changing colors, fonts or Custom CSS, check that text keeps a contrast ratio of at least 4.5:1 against its background (3:1 for large text). Widgets and custom themes are not covered by this description.

For the conformance of uStore with each WCAG criterion, see the StoreFlow Accessibility Conformance Report, available from XMPie Support.