Understanding PocketShop screen layouts
Introduction
PocketShop has been designed to be functional and intuitive. This section describes the screen layout and provides additional information where necessary.
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 complete 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 the barcode of your product. 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 select "Order History" from the menu options, a list of your recent orders is displayed.
PocketShop Dashboard
After logging 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 a hero banner that displays your company logo or other information 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 view your menu options, select the hamburger menu located on the left side of the top bar. Options available are:
Menu option | Description | |
|---|---|---|
1 | Home | Select to return to the Dashboard screen. |
2 | Categories | Select 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 in 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 | Select to open up a list of recently purchased products. This displays the relevant products from your product catalogue. |
4 | Favourites | Select to open up a list of 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 | Select to open your 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 | Select 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 | Select to display your account information. This includes your name, email, phone, and address. It also includes your credit status, specifically your credit limit and remaining balance. |
8 | Contact us | Select to display your contact details, which are stored and managed in the Management Interface. |
9 | Logout | Select to log out of PocketShop. |
