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.

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.

Select a font to be used throughout the store from the list of Google Fonts, and set the size of headings and body text. As you enlarge/reduce the heading size, the proportion between the headings is maintained.

Set the color scheme of the theme and some style properties. For example, the theme's highlight color (which affects links, table headings and more), and the color of the body text and headings.

Upload the logo to appear in the header.

Set additional properties of the header and footer, such as header height and background color.

Tip: If the logo appears too small or too large, you can increase/decrease the header height to allow for more/less space.

Upload the image to appear in the banner. Make sure you choose an image which is appropriate for a responsive design. Your image will automatically adjust to fit the size of the screen. It is recommended that the image's dimensions are1920-2500 x 600 pixels.

Define additional properties of the Homepage banner, such as the title, font color and URL of the button.

Note that the button URL refers by default to the first category which contains online products. You can change the URL to refer to a different page by entering the page's full path.

Upload any additional images that you wish to include in your store, such as icons. These images can be referenced from the Custom CSS area or via Theme Management. Note that the default theme images do not appear here.

Themes contain specific values that are reused in multiple places. For example, the highlight color is used in links, table headings and more. CSS variables allow a value to be stored in one place, then referenced in multiple other places. CSS variables provide the mechanism to reuse and easily change UI elements that share the same CSS properties.

Many of the variables can be defined via the Theme editor's different panels (e.g. Typography, Color &Style), however some cannot. Use the Variables CSS panel to define the values of additional variables that are not available via the editor. An example is the "color-fill" variable, which is used as the page's background color, menu hover color, and more.
To learn about the full list of variable refer to CSS Variables.

The Custom CSS area provides you further flexibility in designing your store. Write manual CSS code to define settings that cannot be defined via the editor or the Variables CSS panel. For example, button size, button location on page, heading location, and more.

Settings defined in this area override your settings in all other panels, including the Variables CSS panel.

Add widgets to the storefront to enhance its functionality.

1. Click Add Widget.

2. Using the slider, activate the widget.

3. From the first dropdown list, select the required widget. The list includes all widgets that have been uploaded to Presets.

4. Then, set the widget's location (slot) in the store, i.e., footer, top of homepage, below header.

5. Lastly, configure the widget as needed.

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.

– 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.