e-Learning

Course Information

StoreFlow is a powerful solution for creating eCommerce stores, or online portals for ordering print and other products. This e-Learning course is a series of online videos designed to help you get started with StoreFlow (including uStore and FreeFlow Core) and introduce the basics needed to get your stores setup quickly and easily. Each video in this e-Learning course focusses on demonstrating and explaining a specific StoreFlow topic and is designed so you can skip to the topic you want. The course is broken into the following sections:
• Introduction/Welcome
• The customer experience
• Initial uStore admin settings
• Making changes to your stores
• Managing users and groups
• Creating and editing product groups
• Adding static products
• Creating and managing product Profiles
• Adding upload/composite products
• Creating Dynamic product templates
• Adding Dynamic products
• Creating and adding uEdit products
• Managing orders and reports
A subscription to StoreFlow Cloud Edition, or purchase of PersonalEffect StoreFlow or StoreFlow Pro.

uStore v8.2; uCreate Print v7.2

Video Information

XMPie StoreFlow Training Introduction to uStore NG Themes 6m 23s v17.2 and later

This module is an introduction to the new uStore NG themes introduced in uStore version 10.

Hi. Welcome to XMPie. 
This video introduces the uStore NG theme technology that is used to change the look and feel of your storefronts.
This introduction video will provide: A quick look at the default “AquaBlue” theme. 
A top-level preview of the different ways the theme can be customized.
I will introduce some key concepts and terminology. And discuss current limitations and future plans.
After watching this introduction video, you can jump into more specific topics in the following modules.
Let’s start with a look at the default theme.
On the home page, the header area includes a logo on the left, top level product groups, 
a product search box, and other functional icons on the right.
There is a promotional banner area. And then product groups. 
Below the product groups are featured or highlighted products. 
And a footer area at the bottom of the page.
The home page is fully responsive catering for tablet and mobile devices as well as desktop.
If you click to a product group, you will see any sub groups displayed at the top, and products in the selected group are shown at the bottom.
The product order pages will be slightly different depending on the type of product. 
This is a dynamic product using the new single page mode that features automatic preview refresh 
and both customization and property selections on the one page.
From the uStore back office perspective, when you create a new store, the store is automatically set to NG mode. 
While some existing customers who upgrade to newer uStore versions may still have some stores in Legacy mode 
that can be updated to use the new NG theme technology. 
On the Appearance tab you can select the Theme that will be used on the selected store. 
Out of the box, there is only one theme provided – XMPie AquaBlue. 
While there is only one default theme, it is easy to make customizations to the theme for different stores. 
In fact all these different stores are using the same AquaBlue theme.
Theme customizations are easily made via the uStore admin site, by selecting “customize theme” which opens the theme editor.
Here you can use simple controls to modify the theme for this individual store – changing the header size and color for example. 
And adding your logo.
The AquaBlue theme uses about 40 different CSS Variables 
which make it much easier to make global theme changes from store to store. 
You can find information about the available CSS Variables in the uStore-NG Theme Customization Guide.
For example, I could enter --text-color-heading: blue; 
After a moment, the editor will automatically save a draft and you can see the change in the preview.
For even more control, you can add custom CSS here overriding existing CSS classes.
In addition to these simple customizations, NG themes include several locations where widgets 
or small components can be added. 
Installing and using widgets is discussed in a later video.
These edits are in “draft” mode which can only be seen by the uStore administrator. 
When you are happy with your changes, you can publish the theme customizations to make them live on this store.
It is also possible to make more structural changes to the theme by creating new themes.
uStore admin’s presets area provides an option for you to download and upload themes. 
In general, a web developer would download the default AquaBlue theme and use React JS to make changes. 
For example, to add promotional areas into the design, or change the way the products are displayed. 
The new theme can be packaged and then uploaded to uStore like I have done to add this custom theme. 
There is more about this in a later video.
So, you will have noticed that we talk about themes now instead of skins. 
Themes refer to a skeleton or structural framework that is available server-wide and can be applied to one or more stores.
Each store on the server that is using uStore NG themes, can have theme customizations made via an easy-to-use theme editor 
making them appear significantly different to other stores using the same theme.
Themes can be downloaded from or uploaded to the server making it possible to modify or create new themes 
or transfer themes between different uStore servers.
When using the theme editor in the uStore admin back office, you must use the Chrome browser. 
No other browser is officially supported for the uStore admin back office.
Front end stores using the new theme technology support the latest modern browsers, including Safari, Chrome, Firefox, and Edge.
The uStore R&D team is working progressively to move all uStore pages from older .net code to the new React JS code. 
Today, these pages are fully migrated to the new theme technology.
Other pages in the storefront are referred to as hybrid - where older .net code is wrapped into a React JS page 
that provides only the header and footer areas.
XMPie intends to migrate other pages to the new theme technology as soon as possible 
and each new version includes additional pages or sections in the theme.
You can find documentation for the uStore NG Theme technology in the uStore NG Github Wiki at this URL.
There are several more videos following this introduction to dive deeper into uStore NG themes.
If you see only this introduction video, then you need to login to Campus to access the others

This video has been watched 1338 times.

Downloads for this video

 English