Customizing a Theme

A theme is a template that determines the way that your Storefront looks and feels. Different themes have different styles and layouts, and offer a different experience for your customers.

uStore NG comes with an out-of-the-box theme especially designed for your online stores. Customizing a theme to best fit your organization’s branding guidelines can be achieved within seconds using the WYSIWYG Theme Editor, without the need to edit any code.

The Theme Editor provides simple control over design elements such as fonts, colors and images. You can play around with different settings and style them to your liking. Preview the design and when ready publish it to the online store.

If you wish to make changes beyond the given settings, then you can edit the CSS code via the editor. To further assist you, the CSS uses variables which enable you, with a single change, to globally customize multiple UI elements.

As you work, your changes are automatically saved as a draft. Changes are kept even when quitting the editor.

AquaBlue, uStore's default theme, is a flexible responsive theme that is suitable for all stores. With AquaBlue you can quickly set up a store and start selling. AquaBlue looks polished even without any theme customizations and appears great on any device.

Note that theme customization is per store. This means that your customization settings are for the selected store only.

Edit your theme settings

The theme editor includes a left panel where you can modify the theme's settings, and a preview area. As you work you can browse between the store pages in the preview area to see the changes as they appear in the different pages of the store, in both mobile and desktop view, or select "Preview Draft" to see the draft version in a new tab.
When you open the draft in a new tab, every change to the theme will require to refresh the tab's content.

To customize a theme:

1.      Open the store whose theme you wish to modify.

2.      Click Store Settings > Customize Theme.

3.      Edit the theme settings in the following panels.
As you work, your changes are automatically saved as a draft and displayed in the preview area.

   Typography

   Color and Style

   Header and Footer

   Homepage Banner

   Assets

   Variables CSS

   Custom CSS

4.      If you wish to revert to the theme's default settings, select Revert > Clear and revert to theme defaults.
All values of the draft are deleted, and the theme's default settings populate the editor.

5.      If you wish to revert to the theme's published settings, select Revert > Revert to the published settings.
All values of the draft are deleted, and the published settings populate the editor.

6.      Once you are done, do one of the following:

   Click Publish to implement all changes in the Storefront.

   Quit the editor. Your new settings are kept and will be shown when you next open the editor.

If you wish to further develop the theme - add content, logic, functionality or any other design changes which are not possible by means of the editor - do so via Theme Management.