Understanding PocketShop screen layouts
Introduction
PocketShop has been designed to be functional and intuitive. This section describes the screen layout and provides you with additional information where it is required.
General layout
The basic screen layout of each PocketShop screen consists of:
A: a top bar, consisting of:
User interface element | Name | Description | |
|---|---|---|---|
1 | Hamburger menu | Provides you with the full list of menu options. | |
2 | Card | Screen title | Informs you of what functionality you are currently using within PocketShop. |
3 | Input field | Barcode scanner | Opens a barcode scanner, which scans your product’s barcode. Typically, the barcode is stored as a string or number in an ERP and represented as an image containing a pattern of bars. ✔ Android and i0S QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39, ITF ✔ Android only CODABAR, CODE_93, RSS14, PDF417, RSS_EXPANDED |
4 | Input field | Search facility | Allows you to search for products by product code or keyword. |
5 | Cart icon | Shopping cart | Opens the shopping cart, which lists the products you have ordered, a net total and an option that allows you to checkout. |
B: a main content area, containing data that has been retrieved from your ERP for the chosen menu option that you have selected. For example, if you have selected Order History from the menu options, a list of recent orders are displayed.
PocketShop Dashboard
After log in, you are presented with the PocketShop Dashboard, which has the following elements:
User interface element | Name | Description |
|---|---|---|
Top bar | Dashboard | Contains the set of options that are available on all PocketShop screens. |
Carousel | Company logo | Contains hero banner that contacts your company logo, or other information that you wish to share with your customers. It can be set up to scroll left to right. |
Carousel | Featured products | Contains a set of links to your Featured products. It can be set up to scroll left to right. |
Category tiles | Popular categories | Contains a set of links to your popular categories. Your category structure is the same as that you have set up for WebShop. This means that it can be centrally managed in the Management Interface, and changes made there are reflected in both PocketShop and WebShop. |
Footer banner | Latest news | Contains a link to any article that you wish to share in this location, such as your company news. |
PocketShop menu options
To see your menu options, click the hamburger menu on the left of the top bar. With a click of a button, you have access to PocketShop’s key functionality, as follows:
Menu option | Description | |
|---|---|---|
1 | Home | Click to return to the Dashboard screen. |
2 | Categories | Click to open up a set of sub-menus with your categories listed. Select the sub-category you wish to view. This displays the relevant page in your product catalogue. The same category structure is used your WebShop. This means that it can be centrally managed in the Management Interface, and changes made there are reflected in both PocketShop and WebShop. |
3 | Recent products | Click to open up a list of recently purchased products. This displays the relevant products from your product catalogue. |
4 | Favourites | Click to open up a list products marked as Favourites. This displays the relevant products from your product catalogue. To mark a product as a Favourite, click the purple heart on the top right of the product listing. |
5 | Order history | Click to open recent order history. This displays an order history listing under the following headings:
From the Order history screen, you can view additional information about any one order. |
6 | Transactions | Click to open a list of recent transactions. This displays a list of transactions under the following headings:
From the Transaction screen, you can view the invoice associated with any one transaction. |
7 | My account | Click to display your account information. This includes your name, email, phone and address. It also includes your credit status - both your credit limit and your remaining balance. |
8 | Contact us | Click to display your contact details, which are stored and managed in Management Interface |
9 | Logout | Click to logout of PocketShop. |
